+6

actions/createPublicationDraft.ts

··· 11 11 redirectUser: false, 12 12 firstBlockType: "text", 13 13 }); 14 14 + let { data: publication } = await supabaseServerClient 15 15 + .from("publications") 16 16 + .select("*") 17 17 + .eq("uri", publication_uri) 18 18 + .single(); 19 19 + if (publication?.identity_did !== identity.atp_did) return; 14 20 15 21 await supabaseServerClient 16 22 .from("leaflets_in_publications")

+56

actions/deleteLeaflet.ts

··· 16 16 export async function deleteLeaflet(permission_token: PermissionToken) { 17 17 const client = await pool.connect(); 18 18 const db = drizzle(client); 19 19 + 20 20 + // Get the current user's identity 21 21 + let identity = await getIdentityData(); 22 22 + 23 23 + // Check publication and document ownership in one query 24 24 + let { data: tokenData } = await supabaseServerClient 25 25 + .from("permission_tokens") 26 26 + .select( 27 27 + ` 28 28 + id, 29 29 + leaflets_in_publications(publication, publications!inner(identity_did)), 30 30 + leaflets_to_documents(document, documents!inner(uri)) 31 31 + `, 32 32 + ) 33 33 + .eq("id", permission_token.id) 34 34 + .single(); 35 35 + 36 36 + if (tokenData) { 37 37 + // Check if leaflet is in a publication 38 38 + const leafletInPubs = tokenData.leaflets_in_publications || []; 39 39 + if (leafletInPubs.length > 0) { 40 40 + if (!identity) { 41 41 + throw new Error( 42 42 + "Unauthorized: You must be logged in to delete a leaflet in a publication", 43 43 + ); 44 44 + } 45 45 + const isOwner = leafletInPubs.some( 46 46 + (pub: any) => pub.publications.identity_did === identity.atp_did, 47 47 + ); 48 48 + if (!isOwner) { 49 49 + throw new Error( 50 50 + "Unauthorized: You must own the publication to delete this leaflet", 51 51 + ); 52 52 + } 53 53 + } 54 54 + 55 55 + // Check if there's a standalone published document 56 56 + const leafletDocs = tokenData.leaflets_to_documents || []; 57 57 + if (leafletDocs.length > 0) { 58 58 + if (!identity) { 59 59 + throw new Error( 60 60 + "Unauthorized: You must be logged in to delete a published leaflet", 61 61 + ); 62 62 + } 63 63 + for (let leafletDoc of leafletDocs) { 64 64 + const docUri = leafletDoc.documents?.uri; 65 65 + // Extract the DID from the document URI (format: at://did:plc:xxx/...) 66 66 + if (docUri && identity.atp_did && !docUri.includes(identity.atp_did)) { 67 67 + throw new Error( 68 68 + "Unauthorized: You must own the published document to delete this leaflet", 69 69 + ); 70 70 + } 71 71 + } 72 72 + } 73 73 + } 74 74 + 19 75 await db.transaction(async (tx) => { 20 76 let [token] = await tx 21 77 .select()

+1

actions/getIdentityData.ts

··· 30 30 id, 31 31 root_entity, 32 32 permission_token_rights(*), 33 33 + leaflets_to_documents(*, documents(*)), 33 34 leaflets_in_publications(*, publications(*), documents(*)) 34 35 ) 35 36 )

+33

actions/publications/moveLeafletToPublication.ts

··· 1 1 + "use server"; 2 2 + 3 3 + import { getIdentityData } from "actions/getIdentityData"; 4 4 + import { supabaseServerClient } from "supabase/serverClient"; 5 5 + 6 6 + export async function moveLeafletToPublication( 7 7 + leaflet_id: string, 8 8 + publication_uri: string, 9 9 + metadata: { title: string; description: string }, 10 10 + entitiesToDelete: string[], 11 11 + ) { 12 12 + let identity = await getIdentityData(); 13 13 + if (!identity || !identity.atp_did) return null; 14 14 + let { data: publication } = await supabaseServerClient 15 15 + .from("publications") 16 16 + .select("*") 17 17 + .eq("uri", publication_uri) 18 18 + .single(); 19 19 + if (publication?.identity_did !== identity.atp_did) return; 20 20 + 21 21 + await supabaseServerClient.from("leaflets_in_publications").insert({ 22 22 + publication: publication_uri, 23 23 + leaflet: leaflet_id, 24 24 + doc: null, 25 25 + title: metadata.title, 26 26 + description: metadata.description, 27 27 + }); 28 28 + 29 29 + await supabaseServerClient 30 30 + .from("entities") 31 31 + .delete() 32 32 + .in("id", entitiesToDelete); 33 33 + }

-26

actions/publications/updateLeafletDraftMetadata.ts

··· 1 1 - "use server"; 2 2 - 3 3 - import { getIdentityData } from "actions/getIdentityData"; 4 4 - import { supabaseServerClient } from "supabase/serverClient"; 5 5 - 6 6 - export async function updateLeafletDraftMetadata( 7 7 - leafletID: string, 8 8 - publication_uri: string, 9 9 - title: string, 10 10 - description: string, 11 11 - ) { 12 12 - let identity = await getIdentityData(); 13 13 - if (!identity?.atp_did) return null; 14 14 - let { data: publication } = await supabaseServerClient 15 15 - .from("publications") 16 16 - .select() 17 17 - .eq("uri", publication_uri) 18 18 - .single(); 19 19 - if (!publication || publication.identity_did !== identity.atp_did) 20 20 - return null; 21 21 - await supabaseServerClient 22 22 - .from("leaflets_in_publications") 23 23 - .update({ title, description }) 24 24 - .eq("leaflet", leafletID) 25 25 - .eq("publication", publication_uri); 26 26 - }

+396 -69

actions/publishToPublication.ts

··· 32 32 import { scanIndexLocal } from "src/replicache/utils"; 33 33 import type { Fact } from "src/replicache"; 34 34 import type { Attribute } from "src/replicache/attributes"; 35 35 - import { 36 36 - Delta, 37 37 - YJSFragmentToString, 38 38 - } from "components/Blocks/TextBlock/RenderYJSFragment"; 35 35 + import { Delta, YJSFragmentToString } from "src/utils/yjsFragmentToString"; 39 36 import { ids } from "lexicons/api/lexicons"; 40 37 import { BlobRef } from "@atproto/lexicon"; 41 38 import { AtUri } from "@atproto/syntax"; ··· 44 41 import { List, parseBlocksToList } from "src/utils/parseBlocksToList"; 45 42 import { getBlocksWithTypeLocal } from "src/hooks/queries/useBlocks"; 46 43 import { Lock } from "src/utils/lock"; 44 44 + import type { PubLeafletPublication } from "lexicons/api"; 45 45 + import { 46 46 + ColorToRGB, 47 47 + ColorToRGBA, 48 48 + } from "components/ThemeManager/colorToLexicons"; 49 49 + import { parseColor } from "@react-stately/color"; 50 50 + import { Notification, pingIdentityToUpdateNotification } from "src/notifications"; 51 51 + import { v7 } from "uuid"; 47 52 48 53 export async function publishToPublication({ 49 54 root_entity, ··· 51 56 leaflet_id, 52 57 title, 53 58 description, 59 59 + tags, 60 60 + entitiesToDelete, 54 61 }: { 55 62 root_entity: string; 56 56 - publication_uri: string; 63 63 + publication_uri?: string; 57 64 leaflet_id: string; 58 65 title?: string; 59 66 description?: string; 67 67 + tags?: string[]; 68 68 + entitiesToDelete?: string[]; 60 69 }) { 61 70 const oauthClient = await createOauthClient(); 62 71 let identity = await getIdentityData(); ··· 66 75 let agent = new AtpBaseClient( 67 76 credentialSession.fetchHandler.bind(credentialSession), 68 77 ); 69 69 - let { data: draft } = await supabaseServerClient 70 70 - .from("leaflets_in_publications") 71 71 - .select("*, publications(*), documents(*)") 72 72 - .eq("publication", publication_uri) 73 73 - .eq("leaflet", leaflet_id) 74 74 - .single(); 75 75 - if (!draft || identity.atp_did !== draft?.publications?.identity_did) 76 76 - throw new Error("No draft or not publisher"); 78 78 + 79 79 + // Check if we're publishing to a publication or standalone 80 80 + let draft: any = null; 81 81 + let existingDocUri: string | null = null; 82 82 + 83 83 + if (publication_uri) { 84 84 + // Publishing to a publication - use leaflets_in_publications 85 85 + let { data, error } = await supabaseServerClient 86 86 + .from("publications") 87 87 + .select("*, leaflets_in_publications(*, documents(*))") 88 88 + .eq("uri", publication_uri) 89 89 + .eq("leaflets_in_publications.leaflet", leaflet_id) 90 90 + .single(); 91 91 + console.log(error); 92 92 + 93 93 + if (!data || identity.atp_did !== data?.identity_did) 94 94 + throw new Error("No draft or not publisher"); 95 95 + draft = data.leaflets_in_publications[0]; 96 96 + existingDocUri = draft?.doc; 97 97 + } else { 98 98 + // Publishing standalone - use leaflets_to_documents 99 99 + let { data } = await supabaseServerClient 100 100 + .from("leaflets_to_documents") 101 101 + .select("*, documents(*)") 102 102 + .eq("leaflet", leaflet_id) 103 103 + .single(); 104 104 + draft = data; 105 105 + existingDocUri = draft?.document; 106 106 + } 107 107 + 108 108 + // Heuristic: Remove title entities if this is the first time publishing 109 109 + // (when coming from a standalone leaflet with entitiesToDelete passed in) 110 110 + if (entitiesToDelete && entitiesToDelete.length > 0 && !existingDocUri) { 111 111 + await supabaseServerClient 112 112 + .from("entities") 113 113 + .delete() 114 114 + .in("id", entitiesToDelete); 115 115 + } 116 116 + 77 117 let { data } = await supabaseServerClient.rpc("get_facts", { 78 118 root: root_entity, 79 119 }); 80 120 let facts = (data as unknown as Fact<Attribute>[]) || []; 81 121 82 82 - let { firstPageBlocks, pages } = await processBlocksToPages( 122 122 + let { pages } = await processBlocksToPages( 83 123 facts, 84 124 agent, 85 125 root_entity, ··· 88 128 89 129 let existingRecord = 90 130 (draft?.documents?.data as PubLeafletDocument.Record | undefined) || {}; 131 131 + 132 132 + // Extract theme for standalone documents (not for publications) 133 133 + let theme: PubLeafletPublication.Theme | undefined; 134 134 + if (!publication_uri) { 135 135 + theme = await extractThemeFromFacts(facts, root_entity, agent); 136 136 + } 137 137 + 91 138 let record: PubLeafletDocument.Record = { 139 139 + publishedAt: new Date().toISOString(), 140 140 + ...existingRecord, 92 141 $type: "pub.leaflet.document", 93 142 author: credentialSession.did!, 94 94 - publication: publication_uri, 95 95 - publishedAt: new Date().toISOString(), 96 96 - ...existingRecord, 143 143 + ...(publication_uri && { publication: publication_uri }), 144 144 + ...(theme && { theme }), 97 145 title: title || "Untitled", 98 146 description: description || "", 99 99 - pages: [ 100 100 - { 101 101 - $type: "pub.leaflet.pages.linearDocument", 102 102 - blocks: firstPageBlocks, 103 103 - }, 104 104 - ...pages.map((p) => { 105 105 - if (p.type === "canvas") { 106 106 - return { 107 107 - $type: "pub.leaflet.pages.canvas" as const, 108 108 - id: p.id, 109 109 - blocks: p.blocks as PubLeafletPagesCanvas.Block[], 110 110 - }; 111 111 - } else { 112 112 - return { 113 113 - $type: "pub.leaflet.pages.linearDocument" as const, 114 114 - id: p.id, 115 115 - blocks: p.blocks as PubLeafletPagesLinearDocument.Block[], 116 116 - }; 117 117 - } 118 118 - }), 119 119 - ], 147 147 + ...(tags !== undefined && { tags }), // Include tags if provided (even if empty array to clear tags) 148 148 + pages: pages.map((p) => { 149 149 + if (p.type === "canvas") { 150 150 + return { 151 151 + $type: "pub.leaflet.pages.canvas" as const, 152 152 + id: p.id, 153 153 + blocks: p.blocks as PubLeafletPagesCanvas.Block[], 154 154 + }; 155 155 + } else { 156 156 + return { 157 157 + $type: "pub.leaflet.pages.linearDocument" as const, 158 158 + id: p.id, 159 159 + blocks: p.blocks as PubLeafletPagesLinearDocument.Block[], 160 160 + }; 161 161 + } 162 162 + }), 120 163 }; 121 121 - let rkey = draft?.doc ? new AtUri(draft.doc).rkey : TID.nextStr(); 164 164 + 165 165 + // Keep the same rkey if updating an existing document 166 166 + let rkey = existingDocUri ? new AtUri(existingDocUri).rkey : TID.nextStr(); 122 167 let { data: result } = await agent.com.atproto.repo.putRecord({ 123 168 rkey, 124 169 repo: credentialSession.did!, ··· 127 172 validate: false, //TODO publish the lexicon so we can validate! 128 173 }); 129 174 175 175 + // Optimistically create database entries 130 176 await supabaseServerClient.from("documents").upsert({ 131 177 uri: result.uri, 132 178 data: record as Json, 133 179 }); 134 134 - await Promise.all([ 135 135 - //Optimistically put these in! 136 136 - supabaseServerClient.from("documents_in_publications").upsert({ 137 137 - publication: record.publication, 138 138 - document: result.uri, 139 139 - }), 140 140 - supabaseServerClient 141 141 - .from("leaflets_in_publications") 142 142 - .update({ 180 180 + 181 181 + if (publication_uri) { 182 182 + // Publishing to a publication - update both tables 183 183 + await Promise.all([ 184 184 + supabaseServerClient.from("documents_in_publications").upsert({ 185 185 + publication: publication_uri, 186 186 + document: result.uri, 187 187 + }), 188 188 + supabaseServerClient.from("leaflets_in_publications").upsert({ 143 189 doc: result.uri, 144 144 - }) 145 145 - .eq("leaflet", leaflet_id) 146 146 - .eq("publication", publication_uri), 147 147 - ]); 190 190 + leaflet: leaflet_id, 191 191 + publication: publication_uri, 192 192 + title: title, 193 193 + description: description, 194 194 + }), 195 195 + ]); 196 196 + } else { 197 197 + // Publishing standalone - update leaflets_to_documents 198 198 + await supabaseServerClient.from("leaflets_to_documents").upsert({ 199 199 + leaflet: leaflet_id, 200 200 + document: result.uri, 201 201 + title: title || "Untitled", 202 202 + description: description || "", 203 203 + }); 204 204 + 205 205 + // Heuristic: Remove title entities if this is the first time publishing standalone 206 206 + // (when entitiesToDelete is provided and there's no existing document) 207 207 + if (entitiesToDelete && entitiesToDelete.length > 0 && !existingDocUri) { 208 208 + await supabaseServerClient 209 209 + .from("entities") 210 210 + .delete() 211 211 + .in("id", entitiesToDelete); 212 212 + } 213 213 + } 214 214 + 215 215 + // Create notifications for mentions (only on first publish) 216 216 + if (!existingDocUri) { 217 217 + await createMentionNotifications(result.uri, record, credentialSession.did!); 218 218 + } 148 219 149 220 return { rkey, record: JSON.parse(JSON.stringify(record)) }; 150 221 } ··· 169 240 170 241 let firstEntity = scan.eav(root_entity, "root/page")?.[0]; 171 242 if (!firstEntity) throw new Error("No root page"); 172 172 - let blocks = getBlocksWithTypeLocal(facts, firstEntity?.data.value); 173 173 - let b = await blocksToRecord(blocks, did); 174 174 - return { firstPageBlocks: b, pages }; 243 243 + 244 244 + // Check if the first page is a canvas or linear document 245 245 + let [pageType] = scan.eav(firstEntity.data.value, "page/type"); 246 246 + 247 247 + if (pageType?.data.value === "canvas") { 248 248 + // First page is a canvas 249 249 + let canvasBlocks = await canvasBlocksToRecord(firstEntity.data.value, did); 250 250 + pages.unshift({ 251 251 + id: firstEntity.data.value, 252 252 + blocks: canvasBlocks, 253 253 + type: "canvas", 254 254 + }); 255 255 + } else { 256 256 + // First page is a linear document 257 257 + let blocks = getBlocksWithTypeLocal(facts, firstEntity?.data.value); 258 258 + let b = await blocksToRecord(blocks, did); 259 259 + pages.unshift({ 260 260 + id: firstEntity.data.value, 261 261 + blocks: b, 262 262 + type: "doc", 263 263 + }); 264 264 + } 265 265 + 266 266 + return { pages }; 175 267 176 268 async function uploadImage(src: string) { 177 269 let data = await fetch(src); ··· 213 305 if (!b) return []; 214 306 let block: PubLeafletPagesLinearDocument.Block = { 215 307 $type: "pub.leaflet.pages.linearDocument#block", 216 216 - alignment, 217 308 block: b, 218 309 }; 310 310 + if (alignment) block.alignment = alignment; 219 311 return [block]; 220 312 } else { 221 313 let block: PubLeafletPagesLinearDocument.Block = { ··· 257 349 Y.applyUpdate(doc, update); 258 350 let nodes = doc.getXmlElement("prosemirror").toArray(); 259 351 let stringValue = YJSFragmentToString(nodes[0]); 260 260 - let facets = YJSFragmentToFacets(nodes[0]); 352 352 + let { facets } = YJSFragmentToFacets(nodes[0]); 261 353 return [stringValue, facets] as const; 262 354 }; 263 355 if (b.type === "card") { ··· 313 405 let [stringValue, facets] = getBlockContent(b.value); 314 406 let block: $Typed<PubLeafletBlocksHeader.Main> = { 315 407 $type: "pub.leaflet.blocks.header", 316 316 - level: headingLevel?.data.value || 1, 408 408 + level: Math.floor(headingLevel?.data.value || 1), 317 409 plaintext: stringValue, 318 410 facets, 319 411 }; ··· 346 438 let block: $Typed<PubLeafletBlocksIframe.Main> = { 347 439 $type: "pub.leaflet.blocks.iframe", 348 440 url: url.data.value, 349 349 - height: height?.data.value || 600, 441 441 + height: Math.floor(height?.data.value || 600), 350 442 }; 351 443 return block; 352 444 } ··· 360 452 $type: "pub.leaflet.blocks.image", 361 453 image: blobref, 362 454 aspectRatio: { 363 363 - height: image.data.height, 364 364 - width: image.data.width, 455 455 + height: Math.floor(image.data.height), 456 456 + width: Math.floor(image.data.width), 365 457 }, 366 458 alt: altText ? altText.data.value : undefined, 367 459 }; ··· 518 610 519 611 function YJSFragmentToFacets( 520 612 node: Y.XmlElement | Y.XmlText | Y.XmlHook, 521 521 - ): PubLeafletRichtextFacet.Main[] { 613 613 + byteOffset: number = 0, 614 614 + ): { facets: PubLeafletRichtextFacet.Main[]; byteLength: number } { 522 615 if (node.constructor === Y.XmlElement) { 523 523 - return node 524 524 - .toArray() 525 525 - .map((f) => YJSFragmentToFacets(f)) 526 526 - .flat(); 616 616 + // Handle inline mention nodes 617 617 + if (node.nodeName === "didMention") { 618 618 + const text = node.getAttribute("text") || ""; 619 619 + const unicodestring = new UnicodeString(text); 620 620 + const facet: PubLeafletRichtextFacet.Main = { 621 621 + index: { 622 622 + byteStart: byteOffset, 623 623 + byteEnd: byteOffset + unicodestring.length, 624 624 + }, 625 625 + features: [ 626 626 + { 627 627 + $type: "pub.leaflet.richtext.facet#didMention", 628 628 + did: node.getAttribute("did"), 629 629 + }, 630 630 + ], 631 631 + }; 632 632 + return { facets: [facet], byteLength: unicodestring.length }; 633 633 + } 634 634 + 635 635 + if (node.nodeName === "atMention") { 636 636 + const text = node.getAttribute("text") || ""; 637 637 + const unicodestring = new UnicodeString(text); 638 638 + const facet: PubLeafletRichtextFacet.Main = { 639 639 + index: { 640 640 + byteStart: byteOffset, 641 641 + byteEnd: byteOffset + unicodestring.length, 642 642 + }, 643 643 + features: [ 644 644 + { 645 645 + $type: "pub.leaflet.richtext.facet#atMention", 646 646 + atURI: node.getAttribute("atURI"), 647 647 + }, 648 648 + ], 649 649 + }; 650 650 + return { facets: [facet], byteLength: unicodestring.length }; 651 651 + } 652 652 + 653 653 + if (node.nodeName === "hard_break") { 654 654 + const unicodestring = new UnicodeString("\n"); 655 655 + return { facets: [], byteLength: unicodestring.length }; 656 656 + } 657 657 + 658 658 + // For other elements (like paragraph), process children 659 659 + let allFacets: PubLeafletRichtextFacet.Main[] = []; 660 660 + let currentOffset = byteOffset; 661 661 + for (const child of node.toArray()) { 662 662 + const result = YJSFragmentToFacets(child, currentOffset); 663 663 + allFacets.push(...result.facets); 664 664 + currentOffset += result.byteLength; 665 665 + } 666 666 + return { facets: allFacets, byteLength: currentOffset - byteOffset }; 527 667 } 668 668 + 528 669 if (node.constructor === Y.XmlText) { 529 670 let facets: PubLeafletRichtextFacet.Main[] = []; 530 671 let delta = node.toDelta() as Delta[]; 531 531 - let byteStart = 0; 672 672 + let byteStart = byteOffset; 673 673 + let totalLength = 0; 532 674 for (let d of delta) { 533 675 let unicodestring = new UnicodeString(d.insert); 534 676 let facet: PubLeafletRichtextFacet.Main = { ··· 561 703 }); 562 704 if (facet.features.length > 0) facets.push(facet); 563 705 byteStart += unicodestring.length; 706 706 + totalLength += unicodestring.length; 564 707 } 565 565 - return facets; 708 708 + return { facets, byteLength: totalLength }; 566 709 } 567 567 - return []; 710 710 + return { facets: [], byteLength: 0 }; 568 711 } 569 712 570 713 type ExcludeString<T> = T extends string ··· 572 715 ? never 573 716 : T /* maybe literal, not the whole `string` */ 574 717 : T; /* not a string */ 718 718 + 719 719 + async function extractThemeFromFacts( 720 720 + facts: Fact<any>[], 721 721 + root_entity: string, 722 722 + agent: AtpBaseClient, 723 723 + ): Promise<PubLeafletPublication.Theme | undefined> { 724 724 + let scan = scanIndexLocal(facts); 725 725 + let pageBackground = scan.eav(root_entity, "theme/page-background")?.[0]?.data 726 726 + .value; 727 727 + let cardBackground = scan.eav(root_entity, "theme/card-background")?.[0]?.data 728 728 + .value; 729 729 + let primary = scan.eav(root_entity, "theme/primary")?.[0]?.data.value; 730 730 + let accentBackground = scan.eav(root_entity, "theme/accent-background")?.[0] 731 731 + ?.data.value; 732 732 + let accentText = scan.eav(root_entity, "theme/accent-text")?.[0]?.data.value; 733 733 + let showPageBackground = !scan.eav( 734 734 + root_entity, 735 735 + "theme/card-border-hidden", 736 736 + )?.[0]?.data.value; 737 737 + let backgroundImage = scan.eav(root_entity, "theme/background-image")?.[0]; 738 738 + let backgroundImageRepeat = scan.eav( 739 739 + root_entity, 740 740 + "theme/background-image-repeat", 741 741 + )?.[0]; 742 742 + 743 743 + let theme: PubLeafletPublication.Theme = { 744 744 + showPageBackground: showPageBackground ?? true, 745 745 + }; 746 746 + 747 747 + if (pageBackground) 748 748 + theme.backgroundColor = ColorToRGBA(parseColor(`hsba(${pageBackground})`)); 749 749 + if (cardBackground) 750 750 + theme.pageBackground = ColorToRGBA(parseColor(`hsba(${cardBackground})`)); 751 751 + if (primary) theme.primary = ColorToRGB(parseColor(`hsba(${primary})`)); 752 752 + if (accentBackground) 753 753 + theme.accentBackground = ColorToRGB( 754 754 + parseColor(`hsba(${accentBackground})`), 755 755 + ); 756 756 + if (accentText) 757 757 + theme.accentText = ColorToRGB(parseColor(`hsba(${accentText})`)); 758 758 + 759 759 + // Upload background image if present 760 760 + if (backgroundImage?.data) { 761 761 + let imageData = await fetch(backgroundImage.data.src); 762 762 + if (imageData.status === 200) { 763 763 + let binary = await imageData.blob(); 764 764 + let blob = await agent.com.atproto.repo.uploadBlob(binary, { 765 765 + headers: { "Content-Type": binary.type }, 766 766 + }); 767 767 + 768 768 + theme.backgroundImage = { 769 769 + $type: "pub.leaflet.theme.backgroundImage", 770 770 + image: blob.data.blob, 771 771 + repeat: backgroundImageRepeat?.data.value ? true : false, 772 772 + ...(backgroundImageRepeat?.data.value && { 773 773 + width: Math.floor(backgroundImageRepeat.data.value), 774 774 + }), 775 775 + }; 776 776 + } 777 777 + } 778 778 + 779 779 + // Only return theme if at least one property is set 780 780 + if (Object.keys(theme).length > 1 || theme.showPageBackground !== true) { 781 781 + return theme; 782 782 + } 783 783 + 784 784 + return undefined; 785 785 + } 786 786 + 787 787 + /** 788 788 + * Extract mentions from a published document and create notifications 789 789 + */ 790 790 + async function createMentionNotifications( 791 791 + documentUri: string, 792 792 + record: PubLeafletDocument.Record, 793 793 + authorDid: string, 794 794 + ) { 795 795 + const mentionedDids = new Set<string>(); 796 796 + const mentionedPublications = new Map<string, string>(); // Map of DID -> publication URI 797 797 + const mentionedDocuments = new Map<string, string>(); // Map of DID -> document URI 798 798 + 799 799 + // Extract mentions from all text blocks in all pages 800 800 + for (const page of record.pages) { 801 801 + if (page.$type === "pub.leaflet.pages.linearDocument") { 802 802 + const linearPage = page as PubLeafletPagesLinearDocument.Main; 803 803 + for (const blockWrapper of linearPage.blocks) { 804 804 + const block = blockWrapper.block; 805 805 + if (block.$type === "pub.leaflet.blocks.text") { 806 806 + const textBlock = block as PubLeafletBlocksText.Main; 807 807 + if (textBlock.facets) { 808 808 + for (const facet of textBlock.facets) { 809 809 + for (const feature of facet.features) { 810 810 + // Check for DID mentions 811 811 + if (PubLeafletRichtextFacet.isDidMention(feature)) { 812 812 + if (feature.did !== authorDid) { 813 813 + mentionedDids.add(feature.did); 814 814 + } 815 815 + } 816 816 + // Check for AT URI mentions (publications and documents) 817 817 + if (PubLeafletRichtextFacet.isAtMention(feature)) { 818 818 + const uri = new AtUri(feature.atURI); 819 819 + 820 820 + if (uri.collection === "pub.leaflet.publication") { 821 821 + // Get the publication owner's DID 822 822 + const { data: publication } = await supabaseServerClient 823 823 + .from("publications") 824 824 + .select("identity_did") 825 825 + .eq("uri", feature.atURI) 826 826 + .single(); 827 827 + 828 828 + if (publication && publication.identity_did !== authorDid) { 829 829 + mentionedPublications.set(publication.identity_did, feature.atURI); 830 830 + } 831 831 + } else if (uri.collection === "pub.leaflet.document") { 832 832 + // Get the document owner's DID 833 833 + const { data: document } = await supabaseServerClient 834 834 + .from("documents") 835 835 + .select("uri, data") 836 836 + .eq("uri", feature.atURI) 837 837 + .single(); 838 838 + 839 839 + if (document) { 840 840 + const docRecord = document.data as PubLeafletDocument.Record; 841 841 + if (docRecord.author !== authorDid) { 842 842 + mentionedDocuments.set(docRecord.author, feature.atURI); 843 843 + } 844 844 + } 845 845 + } 846 846 + } 847 847 + } 848 848 + } 849 849 + } 850 850 + } 851 851 + } 852 852 + } 853 853 + } 854 854 + 855 855 + // Create notifications for DID mentions 856 856 + for (const did of mentionedDids) { 857 857 + const notification: Notification = { 858 858 + id: v7(), 859 859 + recipient: did, 860 860 + data: { 861 861 + type: "mention", 862 862 + document_uri: documentUri, 863 863 + mention_type: "did", 864 864 + }, 865 865 + }; 866 866 + await supabaseServerClient.from("notifications").insert(notification); 867 867 + await pingIdentityToUpdateNotification(did); 868 868 + } 869 869 + 870 870 + // Create notifications for publication mentions 871 871 + for (const [recipientDid, publicationUri] of mentionedPublications) { 872 872 + const notification: Notification = { 873 873 + id: v7(), 874 874 + recipient: recipientDid, 875 875 + data: { 876 876 + type: "mention", 877 877 + document_uri: documentUri, 878 878 + mention_type: "publication", 879 879 + mentioned_uri: publicationUri, 880 880 + }, 881 881 + }; 882 882 + await supabaseServerClient.from("notifications").insert(notification); 883 883 + await pingIdentityToUpdateNotification(recipientDid); 884 884 + } 885 885 + 886 886 + // Create notifications for document mentions 887 887 + for (const [recipientDid, mentionedDocUri] of mentionedDocuments) { 888 888 + const notification: Notification = { 889 889 + id: v7(), 890 890 + recipient: recipientDid, 891 891 + data: { 892 892 + type: "mention", 893 893 + document_uri: documentUri, 894 894 + mention_type: "document", 895 895 + mentioned_uri: mentionedDocUri, 896 896 + }, 897 897 + }; 898 898 + await supabaseServerClient.from("notifications").insert(notification); 899 899 + await pingIdentityToUpdateNotification(recipientDid); 900 900 + } 901 901 + }

+25

actions/searchTags.ts

··· 1 1 + "use server"; 2 2 + import { supabaseServerClient } from "supabase/serverClient"; 3 3 + 4 4 + export type TagSearchResult = { 5 5 + name: string; 6 6 + document_count: number; 7 7 + }; 8 8 + 9 9 + export async function searchTags( 10 10 + query: string, 11 11 + ): Promise<TagSearchResult[] | null> { 12 12 + const searchQuery = query.trim().toLowerCase(); 13 13 + 14 14 + // Use raw SQL query to extract and aggregate tags 15 15 + const { data, error } = await supabaseServerClient.rpc("search_tags", { 16 16 + search_query: searchQuery, 17 17 + }); 18 18 + 19 19 + if (error) { 20 20 + console.error("Error searching tags:", error); 21 21 + return null; 22 22 + } 23 23 + 24 24 + return data; 25 25 + }

+1 -1

actions/subscriptions/subscribeToMailboxWithEmail.ts

··· 11 11 import type { Attribute } from "src/replicache/attributes"; 12 12 import { Database } from "supabase/database.types"; 13 13 import * as Y from "yjs"; 14 14 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 14 14 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 15 15 import { pool } from "supabase/pool"; 16 16 17 17 let supabase = createServerClient<Database>(

+2 -1

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

··· 1 1 "use client"; 2 2 import { AtUri } from "@atproto/syntax"; 3 3 import { PublicationSubscription } from "app/(home-pages)/reader/getSubscriptions"; 4 4 + import { SubscribeWithBluesky } from "app/lish/Subscribe"; 4 5 import { PubIcon } from "components/ActionBar/Publications"; 5 6 import { Separator } from "components/Layout"; 6 7 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider"; ··· 16 17 }, 17 18 ) => { 18 19 let record = props.record as PubLeafletPublication.Record; 19 19 - let theme = usePubTheme(record); 20 20 + let theme = usePubTheme(record.theme); 20 21 let backgroundImage = record?.theme?.backgroundImage?.image?.ref 21 22 ? blobRefToSrc( 22 23 record?.theme?.backgroundImage?.image?.ref,

+1 -2

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

··· 1 1 "use client"; 2 2 import { ThemePopover } from "components/ThemeManager/ThemeSetter"; 3 3 import { CreateNewLeafletButton } from "./CreateNewButton"; 4 4 - import { HelpPopover } from "components/HelpPopover"; 4 4 + import { HelpButton } from "app/[leaflet_id]/actions/HelpButton"; 5 5 import { AccountSettings } from "./AccountSettings"; 6 6 import { useIdentityData } from "components/IdentityProvider"; 7 7 import { useReplicache } from "src/replicache"; ··· 18 18 ) : ( 19 19 <LoginActionButton /> 20 20 )} 21 21 - <HelpPopover /> 22 21 </> 23 22 ); 24 23 };

+17 -21

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

··· 30 30 PublicationBanner, 31 31 } from "./HomeEmpty/HomeEmpty"; 32 32 33 33 - type Leaflet = { 33 33 + export type Leaflet = { 34 34 added_at: string; 35 35 archived?: boolean | null; 36 36 token: PermissionToken & { ··· 38 38 GetLeafletDataReturnType["result"]["data"], 39 39 null 40 40 >["leaflets_in_publications"]; 41 41 + leaflets_to_documents?: Exclude< 42 42 + GetLeafletDataReturnType["result"]["data"], 43 43 + null 44 44 + >["leaflets_to_documents"]; 41 45 }; 42 46 }; 43 47 ··· 130 134 ...identity.permission_token_on_homepage.reduce( 131 135 (acc, tok) => { 132 136 let title = 133 133 - tok.permission_tokens.leaflets_in_publications[0]?.title; 137 137 + tok.permission_tokens.leaflets_in_publications[0]?.title || 138 138 + tok.permission_tokens.leaflets_to_documents[0]?.title; 134 139 if (title) acc[tok.permission_tokens.root_entity] = title; 135 140 return acc; 136 141 }, ··· 222 227 value={{ 223 228 ...leaflet, 224 229 leaflets_in_publications: leaflet.leaflets_in_publications || [], 230 230 + leaflets_to_documents: leaflet.leaflets_to_documents || [], 225 231 blocked_by_admin: null, 226 232 custom_domain_routes: [], 227 233 }} ··· 229 235 <LeafletListItem 230 236 title={props?.titles?.[leaflet.root_entity]} 231 237 archived={archived} 232 232 - token={leaflet} 233 233 - draftInPublication={ 234 234 - leaflet.leaflets_in_publications?.[0]?.publication 235 235 - } 236 236 - published={!!leaflet.leaflets_in_publications?.find((l) => l.doc)} 237 237 - publishedAt={ 238 238 - leaflet.leaflets_in_publications?.find((l) => l.doc)?.documents 239 239 - ?.indexed_at 240 240 - } 241 241 - document_uri={ 242 242 - leaflet.leaflets_in_publications?.find((l) => l.doc)?.documents 243 243 - ?.uri 244 244 - } 245 245 - leaflet_id={leaflet.root_entity} 246 238 loggedIn={!!identity} 247 239 display={display} 248 240 added_at={added_at} ··· 292 284 293 285 let filteredLeaflets = sortedLeaflets.filter( 294 286 ({ token: leaflet, archived: archived }) => { 295 295 - let published = !!leaflet.leaflets_in_publications?.find((l) => l.doc); 287 287 + let published = 288 288 + !!leaflet.leaflets_in_publications?.find((l) => l.doc) || 289 289 + !!leaflet.leaflets_to_documents?.find((l) => l.document); 296 290 let drafts = !!leaflet.leaflets_in_publications?.length && !published; 297 291 let docs = !leaflet.leaflets_in_publications?.length && !archived; 298 298 - // If no filters are active, show all 292 292 + 293 293 + // If no filters are active, show everything that is not archived 299 294 if ( 300 295 !filter.drafts && 301 296 !filter.published && ··· 304 299 ) 305 300 return archived === false || archived === null || archived == undefined; 306 301 302 302 + //if a filter is on, return itemsd of that filter that are also NOT archived 307 303 return ( 308 308 - (filter.drafts && drafts) || 309 309 - (filter.published && published) || 310 310 - (filter.docs && docs) || 304 304 + (filter.drafts && drafts && !archived) || 305 305 + (filter.published && published && !archived) || 306 306 + (filter.docs && docs && !archived) || 311 307 (filter.archived && archived) 312 308 ); 313 309 },

+13 -27

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

··· 1 1 "use client"; 2 2 - import { PermissionToken, useEntity } from "src/replicache"; 2 2 + import { useEntity } from "src/replicache"; 3 3 import { LeafletOptions } from "./LeafletOptions"; 4 4 - import Link from "next/link"; 5 5 - import { use, useState } from "react"; 6 4 import { timeAgo } from "src/utils/timeAgo"; 7 7 - import { usePublishLink } from "components/ShareOptions"; 8 8 - import { Separator } from "components/Layout"; 9 5 import { usePageTitle } from "components/utils/UpdateLeafletTitle"; 6 6 + import { useLeafletPublicationStatus } from "components/PageSWRDataProvider"; 10 7 11 8 export const LeafletInfo = (props: { 12 9 title?: string; 13 13 - draftInPublication?: string; 14 14 - published?: boolean; 15 15 - token: PermissionToken; 16 16 - leaflet_id: string; 17 17 - loggedIn: boolean; 18 10 className?: string; 19 11 display: "grid" | "list"; 20 12 added_at: string; 21 21 - publishedAt?: string; 22 22 - document_uri?: string; 23 13 archived?: boolean | null; 14 14 + loggedIn: boolean; 24 15 }) => { 25 25 - let [prefetch, setPrefetch] = useState(false); 16 16 + const pubStatus = useLeafletPublicationStatus(); 26 17 let prettyCreatedAt = props.added_at ? timeAgo(props.added_at) : ""; 27 27 - let prettyPublishedAt = props.publishedAt ? timeAgo(props.publishedAt) : ""; 18 18 + let prettyPublishedAt = pubStatus?.publishedAt 19 19 + ? timeAgo(pubStatus.publishedAt) 20 20 + : ""; 28 21 29 22 // Look up root page first, like UpdateLeafletTitle does 30 30 - let firstPage = useEntity(props.leaflet_id, "root/page")[0]; 31 31 - let entityID = firstPage?.data.value || props.leaflet_id; 23 23 + let firstPage = useEntity(pubStatus?.leafletId ?? "", "root/page")[0]; 24 24 + let entityID = firstPage?.data.value || pubStatus?.leafletId || ""; 32 25 let titleFromDb = usePageTitle(entityID); 33 26 34 27 let title = props.title ?? titleFromDb ?? "Untitled"; ··· 42 35 {title} 43 36 </h3> 44 37 <div className="flex gap-1 shrink-0"> 45 45 - <LeafletOptions 46 46 - leaflet={props.token} 47 47 - draftInPublication={props.draftInPublication} 48 48 - document_uri={props.document_uri} 49 49 - shareLink={`/${props.token.id}`} 50 50 - archived={props.archived} 51 51 - loggedIn={props.loggedIn} 52 52 - /> 38 38 + <LeafletOptions archived={props.archived} loggedIn={props.loggedIn} /> 53 39 </div> 54 40 </div> 55 41 <div className="flex gap-2 items-center"> 56 42 {props.archived ? ( 57 43 <div className="text-xs text-tertiary truncate">Archived</div> 58 58 - ) : props.draftInPublication || props.published ? ( 44 44 + ) : pubStatus?.draftInPublication || pubStatus?.isPublished ? ( 59 45 <div 60 60 - className={`text-xs w-max grow truncate ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`} 46 46 + className={`text-xs w-max grow truncate ${pubStatus?.isPublished ? "font-bold text-tertiary" : "text-tertiary"}`} 61 47 > 62 62 - {props.published 48 48 + {pubStatus?.isPublished 63 49 ? `Published ${prettyPublishedAt}` 64 50 : `Draft ${prettyCreatedAt}`} 65 51 </div>

+20 -15

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

··· 1 1 "use client"; 2 2 - import { PermissionToken } from "src/replicache"; 3 2 import { LeafletListPreview, LeafletGridPreview } from "./LeafletPreview"; 4 3 import { LeafletInfo } from "./LeafletInfo"; 5 4 import { useState, useRef, useEffect } from "react"; 6 5 import { SpeedyLink } from "components/SpeedyLink"; 6 6 + import { useLeafletPublicationStatus } from "components/PageSWRDataProvider"; 7 7 8 8 export const LeafletListItem = (props: { 9 9 - token: PermissionToken; 10 9 archived?: boolean | null; 11 11 - leaflet_id: string; 12 10 loggedIn: boolean; 13 11 display: "list" | "grid"; 14 12 cardBorderHidden: boolean; 15 13 added_at: string; 16 14 title?: string; 17 17 - draftInPublication?: string; 18 18 - published?: boolean; 19 19 - publishedAt?: string; 20 20 - document_uri?: string; 21 15 index: number; 22 16 isHidden: boolean; 23 17 showPreview?: boolean; 24 18 }) => { 19 19 + const pubStatus = useLeafletPublicationStatus(); 25 20 let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false); 26 21 let previewRef = useRef<HTMLDivElement | null>(null); 27 22 ··· 43 38 return () => observer.disconnect(); 44 39 }, [previewRef]); 45 40 41 41 + const tokenId = pubStatus?.shareLink ?? ""; 42 42 + 46 43 if (props.display === "list") 47 44 return ( 48 45 <> ··· 58 55 }} 59 56 > 60 57 <SpeedyLink 61 61 - href={`/${props.token.id}`} 58 58 + href={`/${tokenId}`} 62 59 className={`absolute w-full h-full top-0 left-0 no-underline hover:no-underline! text-primary`} 63 60 /> 64 64 - {props.showPreview && ( 65 65 - <LeafletListPreview isVisible={isOnScreen} {...props} /> 66 66 - )} 67 67 - <LeafletInfo {...props} /> 61 61 + {props.showPreview && <LeafletListPreview isVisible={isOnScreen} />} 62 62 + <LeafletInfo 63 63 + title={props.title} 64 64 + display={props.display} 65 65 + added_at={props.added_at} 66 66 + archived={props.archived} 67 67 + loggedIn={props.loggedIn} 68 68 + /> 68 69 </div> 69 70 {props.cardBorderHidden && ( 70 71 <hr ··· 92 93 }} 93 94 > 94 95 <SpeedyLink 95 95 - href={`/${props.token.id}`} 96 96 + href={`/${tokenId}`} 96 97 className={`absolute w-full h-full top-0 left-0 no-underline hover:no-underline! text-primary`} 97 98 /> 98 99 <div className="grow"> 99 99 - <LeafletGridPreview {...props} isVisible={isOnScreen} /> 100 100 + <LeafletGridPreview isVisible={isOnScreen} /> 100 101 </div> 101 102 <LeafletInfo 102 103 className="px-1 pb-0.5 shrink-0" 103 103 - {...props} 104 104 + title={props.title} 105 105 + display={props.display} 106 106 + added_at={props.added_at} 107 107 + archived={props.archived} 108 108 + loggedIn={props.loggedIn} 104 109 /> 105 110 </div> 106 111 );

+150 -184

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

··· 17 17 deletePost, 18 18 unpublishPost, 19 19 } from "app/lish/[did]/[publication]/dashboard/deletePost"; 20 20 - import { ShareButton } from "components/ShareOptions"; 21 20 import { ShareSmall } from "components/Icons/ShareSmall"; 22 21 import { HideSmall } from "components/Icons/HideSmall"; 23 22 import { hideDoc } from "../storage"; 24 23 25 25 - import { PermissionToken } from "src/replicache"; 26 24 import { 27 25 useIdentityData, 28 26 mutateIdentityData, ··· 31 29 usePublicationData, 32 30 mutatePublicationData, 33 31 } from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider"; 32 32 + import { ShareButton } from "app/[leaflet_id]/actions/ShareOptions"; 33 33 + import { useLeafletPublicationStatus } from "components/PageSWRDataProvider"; 34 34 35 35 export const LeafletOptions = (props: { 36 36 - leaflet: PermissionToken; 37 37 - draftInPublication?: string; 38 38 - document_uri?: string; 39 39 - shareLink: string; 40 36 archived?: boolean | null; 41 37 loggedIn?: boolean; 42 38 }) => { 43 43 - let [state, setState] = useState<"normal" | "areYouSure">( 44 44 - "normal", 45 45 - ); 39 39 + const pubStatus = useLeafletPublicationStatus(); 40 40 + let [state, setState] = useState<"normal" | "areYouSure">("normal"); 46 41 let [open, setOpen] = useState(false); 47 42 let { identity } = useIdentityData(); 48 43 let isPublicationOwner = 49 49 - !!identity?.atp_did && !!props.document_uri?.includes(identity.atp_did); 44 44 + !!identity?.atp_did && !!pubStatus?.documentUri?.includes(identity.atp_did); 50 45 return ( 51 46 <> 52 47 <Menu ··· 70 65 > 71 66 {state === "normal" ? ( 72 67 !props.loggedIn ? ( 73 73 - <LoggedOutOptions 74 74 - leaflet={props.leaflet} 75 75 - setState={setState} 76 76 - shareLink={props.shareLink} 77 77 - /> 78 78 - ) : props.document_uri && isPublicationOwner ? ( 79 79 - <PublishedPostOptions 80 80 - setState={setState} 81 81 - document_uri={props.document_uri} 82 82 - {...props} 83 83 - /> 68 68 + <LoggedOutOptions setState={setState} /> 69 69 + ) : pubStatus?.documentUri && isPublicationOwner ? ( 70 70 + <PublishedPostOptions setState={setState} /> 84 71 ) : ( 85 85 - <DefaultOptions 86 86 - setState={setState} 87 87 - {...props} 88 88 - /> 72 72 + <DefaultOptions setState={setState} archived={props.archived} /> 89 73 ) 90 74 ) : state === "areYouSure" ? ( 91 91 - <DeleteAreYouSureForm 92 92 - backToMenu={() => setState("normal")} 93 93 - leaflet={props.leaflet} 94 94 - document_uri={props.document_uri} 95 95 - draft={!!props.draftInPublication} 96 96 - /> 75 75 + <DeleteAreYouSureForm backToMenu={() => setState("normal")} /> 97 76 ) : null} 98 77 </Menu> 99 78 </> ··· 102 81 103 82 const DefaultOptions = (props: { 104 83 setState: (s: "areYouSure") => void; 105 105 - draftInPublication?: string; 106 106 - leaflet: PermissionToken; 107 107 - shareLink: string; 108 84 archived?: boolean | null; 109 85 }) => { 110 110 - let toaster = useToaster(); 111 111 - let { mutate: mutatePub } = usePublicationData(); 112 112 - let { mutate: mutateIdentity } = useIdentityData(); 86 86 + const pubStatus = useLeafletPublicationStatus(); 87 87 + const toaster = useToaster(); 88 88 + const { setArchived } = useArchiveMutations(); 89 89 + const { identity } = useIdentityData(); 90 90 + const tokenId = pubStatus?.token.id; 91 91 + const itemType = pubStatus?.draftInPublication ? "Draft" : "Leaflet"; 92 92 + 93 93 + // Check if this is a published post/document and if user is the owner 94 94 + const isPublishedPostOwner = 95 95 + !!identity?.atp_did && !!pubStatus?.documentUri?.includes(identity.atp_did); 96 96 + const canDelete = !pubStatus?.documentUri || isPublishedPostOwner; 97 97 + 113 98 return ( 114 99 <> 115 115 - <ShareButton 116 116 - text={ 117 117 - <div className="flex gap-2"> 118 118 - <ShareSmall /> 119 119 - Copy Edit Link 120 120 - </div> 121 121 - } 122 122 - subtext="" 123 123 - smokerText="Link copied!" 124 124 - id="get-link" 125 125 - link={`/${props.shareLink}`} 126 126 - /> 100 100 + <EditLinkShareButton link={pubStatus?.shareLink ?? ""} /> 127 101 <hr className="border-border-light" /> 128 102 <MenuItem 129 103 onSelect={async () => { 104 104 + if (!tokenId) return; 105 105 + setArchived(tokenId, !props.archived); 106 106 + 130 107 if (!props.archived) { 131 131 - mutateIdentityData(mutateIdentity, (data) => { 132 132 - let item = data.permission_token_on_homepage.find( 133 133 - (p) => p.permission_tokens?.id === props.leaflet.id, 134 134 - ); 135 135 - if (item) item.archived = true; 136 136 - }); 137 137 - mutatePublicationData(mutatePub, (data) => { 138 138 - let item = data.publication?.leaflets_in_publications.find( 139 139 - (l) => l.permission_tokens?.id === props.leaflet.id, 140 140 - ); 141 141 - if (item) item.archived = true; 142 142 - }); 143 143 - await archivePost(props.leaflet.id); 108 108 + await archivePost(tokenId); 144 109 toaster({ 145 110 content: ( 146 146 - <div className="font-bold flex gap-2"> 147 147 - Archived{props.draftInPublication ? " Draft" : " Leaflet"}! 111 111 + <div className="font-bold flex gap-2 items-center"> 112 112 + Archived {itemType}! 148 113 <ButtonTertiary 149 114 className="underline text-accent-2!" 150 115 onClick={async () => { 151 151 - mutateIdentityData(mutateIdentity, (data) => { 152 152 - let item = data.permission_token_on_homepage.find( 153 153 - (p) => p.permission_tokens?.id === props.leaflet.id, 154 154 - ); 155 155 - if (item) item.archived = false; 156 156 - }); 157 157 - mutatePublicationData(mutatePub, (data) => { 158 158 - let item = 159 159 - data.publication?.leaflets_in_publications.find( 160 160 - (l) => l.permission_tokens?.id === props.leaflet.id, 161 161 - ); 162 162 - if (item) item.archived = false; 163 163 - }); 164 164 - await unarchivePost(props.leaflet.id); 116 116 + setArchived(tokenId, false); 117 117 + await unarchivePost(tokenId); 165 118 toaster({ 166 166 - content: ( 167 167 - <div className="font-bold flex gap-2"> 168 168 - Unarchived! 169 169 - </div> 170 170 - ), 119 119 + content: <div className="font-bold">Unarchived!</div>, 171 120 type: "success", 172 121 }); 173 122 }} ··· 179 128 type: "success", 180 129 }); 181 130 } else { 182 182 - mutateIdentityData(mutateIdentity, (data) => { 183 183 - let item = data.permission_token_on_homepage.find( 184 184 - (p) => p.permission_tokens?.id === props.leaflet.id, 185 185 - ); 186 186 - if (item) item.archived = false; 187 187 - }); 188 188 - mutatePublicationData(mutatePub, (data) => { 189 189 - let item = data.publication?.leaflets_in_publications.find( 190 190 - (l) => l.permission_tokens?.id === props.leaflet.id, 191 191 - ); 192 192 - if (item) item.archived = false; 193 193 - }); 194 194 - await unarchivePost(props.leaflet.id); 131 131 + await unarchivePost(tokenId); 195 132 toaster({ 196 133 content: <div className="font-bold">Unarchived!</div>, 197 134 type: "success", ··· 200 137 }} 201 138 > 202 139 <ArchiveSmall /> 203 203 - {!props.archived ? " Archive" : "Unarchive"} 204 204 - {props.draftInPublication ? " Draft" : " Leaflet"} 140 140 + {!props.archived ? " Archive" : "Unarchive"} {itemType} 205 141 </MenuItem> 206 206 - <MenuItem 207 207 - onSelect={(e) => { 208 208 - e.preventDefault(); 209 209 - props.setState("areYouSure"); 210 210 - }} 211 211 - > 212 212 - <DeleteSmall /> 213 213 - Delete Forever 214 214 - </MenuItem> 142 142 + {canDelete && ( 143 143 + <DeleteForeverMenuItem 144 144 + onSelect={(e) => { 145 145 + e.preventDefault(); 146 146 + props.setState("areYouSure"); 147 147 + }} 148 148 + /> 149 149 + )} 215 150 </> 216 151 ); 217 152 }; 218 153 219 219 - const LoggedOutOptions = (props: { 220 220 - leaflet: PermissionToken; 221 221 - setState: (s: "areYouSure") => void; 222 222 - shareLink: string; 223 223 - }) => { 224 224 - let toaster = useToaster(); 154 154 + const LoggedOutOptions = (props: { setState: (s: "areYouSure") => void }) => { 155 155 + const pubStatus = useLeafletPublicationStatus(); 156 156 + const toaster = useToaster(); 157 157 + 225 158 return ( 226 159 <> 227 227 - <ShareButton 228 228 - text={ 229 229 - <div className="flex gap-2"> 230 230 - <ShareSmall /> 231 231 - Copy Edit Link 232 232 - </div> 233 233 - } 234 234 - subtext="" 235 235 - smokerText="Link copied!" 236 236 - id="get-link" 237 237 - link={`/${props.shareLink}`} 238 238 - /> 160 160 + <EditLinkShareButton link={`/${pubStatus?.shareLink ?? ""}`} /> 239 161 <hr className="border-border-light" /> 240 162 <MenuItem 241 163 onSelect={() => { 242 242 - hideDoc(props.leaflet); 164 164 + if (pubStatus?.token) hideDoc(pubStatus.token); 243 165 toaster({ 244 166 content: <div className="font-bold">Removed from Home!</div>, 245 167 type: "success", ··· 249 171 <HideSmall /> 250 172 Remove from Home 251 173 </MenuItem> 252 252 - <MenuItem 174 174 + <DeleteForeverMenuItem 253 175 onSelect={(e) => { 254 176 e.preventDefault(); 255 177 props.setState("areYouSure"); 256 178 }} 257 257 - > 258 258 - <DeleteSmall /> 259 259 - Delete Forever 260 260 - </MenuItem> 179 179 + /> 261 180 </> 262 181 ); 263 182 }; 264 183 265 184 const PublishedPostOptions = (props: { 266 185 setState: (s: "areYouSure") => void; 267 267 - document_uri: string; 268 268 - leaflet: PermissionToken; 269 269 - shareLink: string; 270 186 }) => { 271 271 - let toaster = useToaster(); 187 187 + const pubStatus = useLeafletPublicationStatus(); 188 188 + const toaster = useToaster(); 189 189 + const postLink = pubStatus?.postShareLink ?? ""; 190 190 + const isFullUrl = postLink.includes("http"); 191 191 + 272 192 return ( 273 193 <> 274 194 <ShareButton ··· 280 200 } 281 201 smokerText="Link copied!" 282 202 id="get-link" 283 283 - link={`${props.shareLink}`} 203 203 + link={postLink} 204 204 + fullLink={isFullUrl ? postLink : undefined} 284 205 /> 285 285 - 286 206 <hr className="border-border-light" /> 287 207 <MenuItem 288 208 onSelect={async () => { 289 289 - if (props.document_uri) { 290 290 - await unpublishPost(props.document_uri); 209 209 + if (pubStatus?.documentUri) { 210 210 + await unpublishPost(pubStatus.documentUri); 291 211 } 292 212 toaster({ 293 213 content: <div className="font-bold">Unpublished Post!</div>, ··· 303 223 </div> 304 224 </div> 305 225 </MenuItem> 306 306 - <MenuItem 226 226 + <DeleteForeverMenuItem 307 227 onSelect={(e) => { 308 228 e.preventDefault(); 309 229 props.setState("areYouSure"); 310 230 }} 311 311 - > 312 312 - <DeleteSmall /> 313 313 - <div className="flex flex-col"> 314 314 - Delete Post 315 315 - <div className="text-tertiary text-sm font-normal!"> 316 316 - Unpublish AND delete 317 317 - </div> 318 318 - </div> 319 319 - </MenuItem> 231 231 + subtext="Post" 232 232 + /> 320 233 </> 321 234 ); 322 235 }; 323 236 324 324 - const DeleteAreYouSureForm = (props: { 325 325 - backToMenu: () => void; 326 326 - document_uri?: string; 327 327 - leaflet: PermissionToken; 328 328 - draft?: boolean; 329 329 - }) => { 330 330 - let toaster = useToaster(); 331 331 - let { mutate: mutatePub } = usePublicationData(); 332 332 - let { mutate: mutateIdentity } = useIdentityData(); 237 237 + const DeleteAreYouSureForm = (props: { backToMenu: () => void }) => { 238 238 + const pubStatus = useLeafletPublicationStatus(); 239 239 + const toaster = useToaster(); 240 240 + const { removeFromLists } = useArchiveMutations(); 241 241 + const tokenId = pubStatus?.token.id; 242 242 + 243 243 + const itemType = pubStatus?.documentUri 244 244 + ? "Post" 245 245 + : pubStatus?.draftInPublication 246 246 + ? "Draft" 247 247 + : "Leaflet"; 333 248 334 249 return ( 335 250 <div className="flex flex-col justify-center p-2 text-center"> ··· 343 258 </ButtonTertiary> 344 259 <ButtonPrimary 345 260 onClick={async () => { 346 346 - mutateIdentityData(mutateIdentity, (data) => { 347 347 - data.permission_token_on_homepage = 348 348 - data.permission_token_on_homepage.filter( 349 349 - (p) => p.permission_tokens?.id !== props.leaflet.id, 350 350 - ); 351 351 - }); 352 352 - mutatePublicationData(mutatePub, (data) => { 353 353 - if (!data.publication) return; 354 354 - data.publication.leaflets_in_publications = 355 355 - data.publication.leaflets_in_publications.filter( 356 356 - (l) => l.permission_tokens?.id !== props.leaflet.id, 357 357 - ); 358 358 - }); 359 359 - if (props.document_uri) { 360 360 - await deletePost(props.document_uri); 261 261 + if (tokenId) removeFromLists(tokenId); 262 262 + if (pubStatus?.documentUri) { 263 263 + await deletePost(pubStatus.documentUri); 361 264 } 362 362 - deleteLeaflet(props.leaflet); 265 265 + if (pubStatus?.token) deleteLeaflet(pubStatus.token); 363 266 364 267 toaster({ 365 365 - content: ( 366 366 - <div className="font-bold"> 367 367 - Deleted{" "} 368 368 - {props.document_uri 369 369 - ? "Post!" 370 370 - : props.draft 371 371 - ? "Draft" 372 372 - : "Leaflet!"} 373 373 - </div> 374 374 - ), 268 268 + content: <div className="font-bold">Deleted {itemType}!</div>, 375 269 type: "success", 376 270 }); 377 271 }} ··· 383 277 ); 384 278 }; 385 279 280 280 + // Shared menu items 281 281 + const EditLinkShareButton = (props: { link: string }) => ( 282 282 + <ShareButton 283 283 + text={ 284 284 + <div className="flex gap-2"> 285 285 + <ShareSmall /> 286 286 + Copy Edit Link 287 287 + </div> 288 288 + } 289 289 + subtext="" 290 290 + smokerText="Link copied!" 291 291 + id="get-link" 292 292 + link={props.link} 293 293 + /> 294 294 + ); 295 295 + 296 296 + const DeleteForeverMenuItem = (props: { 297 297 + onSelect: (e: Event) => void; 298 298 + subtext?: string; 299 299 + }) => ( 300 300 + <MenuItem onSelect={props.onSelect}> 301 301 + <DeleteSmall /> 302 302 + {props.subtext ? ( 303 303 + <div className="flex flex-col"> 304 304 + Delete {props.subtext} 305 305 + <div className="text-tertiary text-sm font-normal!"> 306 306 + Unpublish AND delete 307 307 + </div> 308 308 + </div> 309 309 + ) : ( 310 310 + "Delete Forever" 311 311 + )} 312 312 + </MenuItem> 313 313 + ); 314 314 + 315 315 + // Helper to update archived state in both identity and publication data 316 316 + function useArchiveMutations() { 317 317 + const { mutate: mutatePub } = usePublicationData(); 318 318 + const { mutate: mutateIdentity } = useIdentityData(); 319 319 + 320 320 + return { 321 321 + setArchived: (tokenId: string, archived: boolean) => { 322 322 + mutateIdentityData(mutateIdentity, (data) => { 323 323 + const item = data.permission_token_on_homepage.find( 324 324 + (p) => p.permission_tokens?.id === tokenId, 325 325 + ); 326 326 + if (item) item.archived = archived; 327 327 + }); 328 328 + mutatePublicationData(mutatePub, (data) => { 329 329 + const item = data.publication?.leaflets_in_publications.find( 330 330 + (l) => l.permission_tokens?.id === tokenId, 331 331 + ); 332 332 + if (item) item.archived = archived; 333 333 + }); 334 334 + }, 335 335 + removeFromLists: (tokenId: string) => { 336 336 + mutateIdentityData(mutateIdentity, (data) => { 337 337 + data.permission_token_on_homepage = 338 338 + data.permission_token_on_homepage.filter( 339 339 + (p) => p.permission_tokens?.id !== tokenId, 340 340 + ); 341 341 + }); 342 342 + mutatePublicationData(mutatePub, (data) => { 343 343 + if (!data.publication) return; 344 344 + data.publication.leaflets_in_publications = 345 345 + data.publication.leaflets_in_publications.filter( 346 346 + (l) => l.permission_tokens?.id !== tokenId, 347 347 + ); 348 348 + }); 349 349 + }, 350 350 + }; 351 351 + }

+46 -95

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

··· 3 3 ThemeBackgroundProvider, 4 4 ThemeProvider, 5 5 } from "components/ThemeManager/ThemeProvider"; 6 6 - import { 7 7 - PermissionToken, 8 8 - useEntity, 9 9 - useReferenceToEntity, 10 10 - } from "src/replicache"; 6 6 + import { useEntity, useReferenceToEntity } from "src/replicache"; 11 7 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 12 8 import { LeafletContent } from "./LeafletContent"; 13 9 import { Tooltip } from "components/Tooltip"; 10 10 + import { useLeafletPublicationStatus } from "components/PageSWRDataProvider"; 11 11 + import { CSSProperties } from "react"; 14 12 15 15 - export const LeafletListPreview = (props: { 16 16 - draft?: boolean; 17 17 - published?: boolean; 18 18 - isVisible: boolean; 19 19 - token: PermissionToken; 20 20 - leaflet_id: string; 21 21 - loggedIn: boolean; 22 22 - }) => { 23 23 - let root = 24 24 - useReferenceToEntity("root/page", props.leaflet_id)[0]?.entity || 25 25 - props.leaflet_id; 26 26 - let firstPage = useEntity(root, "root/page")[0]; 27 27 - let page = firstPage?.data.value || root; 13 13 + function useLeafletPreviewData() { 14 14 + const pubStatus = useLeafletPublicationStatus(); 15 15 + const leafletId = pubStatus?.leafletId ?? ""; 16 16 + const root = 17 17 + useReferenceToEntity("root/page", leafletId)[0]?.entity || leafletId; 18 18 + const firstPage = useEntity(root, "root/page")[0]; 19 19 + const page = firstPage?.data.value || root; 28 20 29 29 - let cardBorderHidden = useCardBorderHidden(root); 30 30 - let rootBackgroundImage = useEntity(root, "theme/card-background-image"); 31 31 - let rootBackgroundRepeat = useEntity( 21 21 + const cardBorderHidden = useCardBorderHidden(root); 22 22 + const rootBackgroundImage = useEntity(root, "theme/card-background-image"); 23 23 + const rootBackgroundRepeat = useEntity( 32 24 root, 33 25 "theme/card-background-image-repeat", 34 26 ); 35 35 - let rootBackgroundOpacity = useEntity( 27 27 + const rootBackgroundOpacity = useEntity( 36 28 root, 37 29 "theme/card-background-image-opacity", 38 30 ); 39 31 32 32 + const contentWrapperStyle: CSSProperties = cardBorderHidden 33 33 + ? {} 34 34 + : { 35 35 + backgroundImage: rootBackgroundImage 36 36 + ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})` 37 37 + : undefined, 38 38 + backgroundRepeat: rootBackgroundRepeat ? "repeat" : "no-repeat", 39 39 + backgroundPosition: "center", 40 40 + backgroundSize: !rootBackgroundRepeat 41 41 + ? "cover" 42 42 + : rootBackgroundRepeat?.data.value / 3, 43 43 + opacity: 44 44 + rootBackgroundImage?.data.src && rootBackgroundOpacity 45 45 + ? rootBackgroundOpacity.data.value 46 46 + : 1, 47 47 + backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))", 48 48 + }; 49 49 + 50 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"}`; 51 51 + 52 52 + return { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass }; 53 53 + } 54 54 + 55 55 + export const LeafletListPreview = (props: { isVisible: boolean }) => { 56 56 + const { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass } = 57 57 + useLeafletPreviewData(); 58 58 + 40 59 return ( 41 60 <Tooltip 42 61 open={true} ··· 73 92 <ThemeProvider local entityID={root} className="rounded-sm"> 74 93 <ThemeBackgroundProvider entityID={root}> 75 94 <div className="leafletPreview grow shrink-0 h-44 w-64 px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none rounded-[2px] "> 76 76 - <div 77 77 - className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`} 78 78 - style={ 79 79 - cardBorderHidden 80 80 - ? {} 81 81 - : { 82 82 - backgroundImage: rootBackgroundImage 83 83 - ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})` 84 84 - : undefined, 85 85 - backgroundRepeat: rootBackgroundRepeat 86 86 - ? "repeat" 87 87 - : "no-repeat", 88 88 - backgroundPosition: "center", 89 89 - backgroundSize: !rootBackgroundRepeat 90 90 - ? "cover" 91 91 - : rootBackgroundRepeat?.data.value / 3, 92 92 - opacity: 93 93 - rootBackgroundImage?.data.src && rootBackgroundOpacity 94 94 - ? rootBackgroundOpacity.data.value 95 95 - : 1, 96 96 - backgroundColor: 97 97 - "rgba(var(--bg-page), var(--bg-page-alpha))", 98 98 - } 99 99 - } 100 100 - > 95 95 + <div className={contentWrapperClass} style={contentWrapperStyle}> 101 96 <LeafletContent entityID={page} isOnScreen={props.isVisible} /> 102 97 </div> 103 98 </div> ··· 107 102 ); 108 103 }; 109 104 110 110 - export const LeafletGridPreview = (props: { 111 111 - draft?: boolean; 112 112 - published?: boolean; 113 113 - token: PermissionToken; 114 114 - leaflet_id: string; 115 115 - loggedIn: boolean; 116 116 - isVisible: boolean; 117 117 - }) => { 118 118 - let root = 119 119 - useReferenceToEntity("root/page", props.leaflet_id)[0]?.entity || 120 120 - props.leaflet_id; 121 121 - let firstPage = useEntity(root, "root/page")[0]; 122 122 - let page = firstPage?.data.value || root; 105 105 + export const LeafletGridPreview = (props: { isVisible: boolean }) => { 106 106 + const { root, page, contentWrapperStyle, contentWrapperClass } = 107 107 + useLeafletPreviewData(); 123 108 124 124 - let cardBorderHidden = useCardBorderHidden(root); 125 125 - let rootBackgroundImage = useEntity(root, "theme/card-background-image"); 126 126 - let rootBackgroundRepeat = useEntity( 127 127 - root, 128 128 - "theme/card-background-image-repeat", 129 129 - ); 130 130 - let rootBackgroundOpacity = useEntity( 131 131 - root, 132 132 - "theme/card-background-image-opacity", 133 133 - ); 134 109 return ( 135 110 <ThemeProvider local entityID={root} className="w-full!"> 136 111 <div className="border border-border-light rounded-md w-full h-full overflow-hidden "> ··· 140 115 inert 141 116 className="leafletPreview grow shrink-0 h-full w-full px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none" 142 117 > 143 143 - <div 144 144 - className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`} 145 145 - style={ 146 146 - cardBorderHidden 147 147 - ? {} 148 148 - : { 149 149 - backgroundImage: rootBackgroundImage 150 150 - ? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})` 151 151 - : undefined, 152 152 - backgroundRepeat: rootBackgroundRepeat 153 153 - ? "repeat" 154 154 - : "no-repeat", 155 155 - backgroundPosition: "center", 156 156 - backgroundSize: !rootBackgroundRepeat 157 157 - ? "cover" 158 158 - : rootBackgroundRepeat?.data.value / 3, 159 159 - opacity: 160 160 - rootBackgroundImage?.data.src && rootBackgroundOpacity 161 161 - ? rootBackgroundOpacity.data.value 162 162 - : 1, 163 163 - backgroundColor: 164 164 - "rgba(var(--bg-page), var(--bg-page-alpha))", 165 165 - } 166 166 - } 167 167 - > 118 118 + <div className={contentWrapperClass} style={contentWrapperStyle}> 168 119 <LeafletContent entityID={page} isOnScreen={props.isVisible} /> 169 120 </div> 170 121 </div>

+2 -1

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

··· 29 29 ...auth_res?.permission_token_on_homepage.reduce( 30 30 (acc, tok) => { 31 31 let title = 32 32 - tok.permission_tokens.leaflets_in_publications[0]?.title; 32 32 + tok.permission_tokens.leaflets_in_publications[0]?.title || 33 33 + tok.permission_tokens.leaflets_to_documents[0]?.title; 33 34 if (title) acc[tok.permission_tokens.root_entity] = title; 34 35 return acc; 35 36 },

+116

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"; 4 4 + import { useState } from "react"; 5 5 + import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 6 6 + import { Fact, PermissionToken } from "src/replicache"; 7 7 + import { Attribute } from "src/replicache/attributes"; 8 8 + import { Actions } from "../home/Actions/Actions"; 9 9 + import { callRPC } from "app/api/rpc/client"; 10 10 + import { useIdentityData } from "components/IdentityProvider"; 11 11 + import useSWR from "swr"; 12 12 + import { getHomeDocs } from "../home/storage"; 13 13 + import { Leaflet, LeafletList } from "../home/HomeLayout"; 14 14 + 15 15 + export const LooseleafsLayout = (props: { 16 16 + entityID: string | null; 17 17 + titles: { [root_entity: string]: string }; 18 18 + initialFacts: { 19 19 + [root_entity: string]: Fact<Attribute>[]; 20 20 + }; 21 21 + }) => { 22 22 + let [searchValue, setSearchValue] = useState(""); 23 23 + let [debouncedSearchValue, setDebouncedSearchValue] = useState(""); 24 24 + 25 25 + useDebouncedEffect( 26 26 + () => { 27 27 + setDebouncedSearchValue(searchValue); 28 28 + }, 29 29 + 200, 30 30 + [searchValue], 31 31 + ); 32 32 + 33 33 + let cardBorderHidden = !!useCardBorderHidden(props.entityID); 34 34 + return ( 35 35 + <DashboardLayout 36 36 + id="looseleafs" 37 37 + cardBorderHidden={cardBorderHidden} 38 38 + currentPage="looseleafs" 39 39 + defaultTab="home" 40 40 + actions={<Actions />} 41 41 + tabs={{ 42 42 + home: { 43 43 + controls: null, 44 44 + content: ( 45 45 + <LooseleafList 46 46 + titles={props.titles} 47 47 + initialFacts={props.initialFacts} 48 48 + cardBorderHidden={cardBorderHidden} 49 49 + searchValue={debouncedSearchValue} 50 50 + /> 51 51 + ), 52 52 + }, 53 53 + }} 54 54 + /> 55 55 + ); 56 56 + }; 57 57 + 58 58 + export const LooseleafList = (props: { 59 59 + titles: { [root_entity: string]: string }; 60 60 + initialFacts: { 61 61 + [root_entity: string]: Fact<Attribute>[]; 62 62 + }; 63 63 + searchValue: string; 64 64 + cardBorderHidden: boolean; 65 65 + }) => { 66 66 + let { identity } = useIdentityData(); 67 67 + let { data: initialFacts } = useSWR( 68 68 + "home-leaflet-data", 69 69 + async () => { 70 70 + if (identity) { 71 71 + let { result } = await callRPC("getFactsFromHomeLeaflets", { 72 72 + tokens: identity.permission_token_on_homepage.map( 73 73 + (ptrh) => ptrh.permission_tokens.root_entity, 74 74 + ), 75 75 + }); 76 76 + let titles = { 77 77 + ...result.titles, 78 78 + ...identity.permission_token_on_homepage.reduce( 79 79 + (acc, tok) => { 80 80 + let title = 81 81 + tok.permission_tokens.leaflets_in_publications[0]?.title || 82 82 + tok.permission_tokens.leaflets_to_documents[0]?.title; 83 83 + if (title) acc[tok.permission_tokens.root_entity] = title; 84 84 + return acc; 85 85 + }, 86 86 + {} as { [k: string]: string }, 87 87 + ), 88 88 + }; 89 89 + return { ...result, titles }; 90 90 + } 91 91 + }, 92 92 + { fallbackData: { facts: props.initialFacts, titles: props.titles } }, 93 93 + ); 94 94 + 95 95 + let leaflets: Leaflet[] = identity 96 96 + ? identity.permission_token_on_homepage 97 97 + .filter( 98 98 + (ptoh) => ptoh.permission_tokens.leaflets_to_documents.length > 0, 99 99 + ) 100 100 + .map((ptoh) => ({ 101 101 + added_at: ptoh.created_at, 102 102 + token: ptoh.permission_tokens as PermissionToken, 103 103 + })) 104 104 + : []; 105 105 + return ( 106 106 + <LeafletList 107 107 + defaultDisplay="list" 108 108 + searchValue={props.searchValue} 109 109 + leaflets={leaflets} 110 110 + titles={initialFacts?.titles || {}} 111 111 + cardBorderHidden={props.cardBorderHidden} 112 112 + initialFacts={initialFacts?.facts || {}} 113 113 + showPreview 114 114 + /> 115 115 + ); 116 116 + };

+47

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

··· 1 1 + import { getIdentityData } from "actions/getIdentityData"; 2 2 + import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; 3 3 + import { Actions } from "../home/Actions/Actions"; 4 4 + import { Fact } from "src/replicache"; 5 5 + import { Attribute } from "src/replicache/attributes"; 6 6 + import { getFactsFromHomeLeaflets } from "app/api/rpc/[command]/getFactsFromHomeLeaflets"; 7 7 + import { supabaseServerClient } from "supabase/serverClient"; 8 8 + import { LooseleafsLayout } from "./LooseleafsLayout"; 9 9 + 10 10 + export default async function Home() { 11 11 + let auth_res = await getIdentityData(); 12 12 + 13 13 + let [allLeafletFacts] = await Promise.all([ 14 14 + auth_res 15 15 + ? getFactsFromHomeLeaflets.handler( 16 16 + { 17 17 + tokens: auth_res.permission_token_on_homepage.map( 18 18 + (r) => r.permission_tokens.root_entity, 19 19 + ), 20 20 + }, 21 21 + { supabase: supabaseServerClient }, 22 22 + ) 23 23 + : undefined, 24 24 + ]); 25 25 + 26 26 + let home_docs_initialFacts = allLeafletFacts?.result || {}; 27 27 + 28 28 + return ( 29 29 + <LooseleafsLayout 30 30 + entityID={auth_res?.home_leaflet?.root_entity || null} 31 31 + titles={{ 32 32 + ...home_docs_initialFacts.titles, 33 33 + ...auth_res?.permission_token_on_homepage.reduce( 34 34 + (acc, tok) => { 35 35 + let title = 36 36 + tok.permission_tokens.leaflets_in_publications[0]?.title || 37 37 + tok.permission_tokens.leaflets_to_documents[0]?.title; 38 38 + if (title) acc[tok.permission_tokens.root_entity] = title; 39 39 + return acc; 40 40 + }, 41 41 + {} as { [k: string]: string }, 42 42 + ), 43 43 + }} 44 44 + initialFacts={home_docs_initialFacts.facts || {}} 45 45 + /> 46 46 + ); 47 47 + }

+98

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

··· 1 1 + import { 2 2 + AppBskyActorProfile, 3 3 + PubLeafletComment, 4 4 + PubLeafletDocument, 5 5 + PubLeafletPublication, 6 6 + } from "lexicons/api"; 7 7 + import { HydratedCommentMentionNotification } from "src/notifications"; 8 8 + import { blobRefToSrc } from "src/utils/blobRefToSrc"; 9 9 + import { MentionTiny } from "components/Icons/MentionTiny"; 10 10 + import { 11 11 + CommentInNotification, 12 12 + ContentLayout, 13 13 + Notification, 14 14 + } from "./Notification"; 15 15 + import { AtUri } from "@atproto/api"; 16 16 + 17 17 + export const CommentMentionNotification = ( 18 18 + props: HydratedCommentMentionNotification, 19 19 + ) => { 20 20 + const docRecord = props.commentData.documents 21 21 + ?.data as PubLeafletDocument.Record; 22 22 + const commentRecord = props.commentData.record as PubLeafletComment.Record; 23 23 + const profileRecord = props.commentData.bsky_profiles 24 24 + ?.record as AppBskyActorProfile.Record; 25 25 + const pubRecord = props.commentData.documents?.documents_in_publications[0] 26 26 + ?.publications?.record as PubLeafletPublication.Record | undefined; 27 27 + const docUri = new AtUri(props.commentData.documents?.uri!); 28 28 + const rkey = docUri.rkey; 29 29 + const did = docUri.host; 30 30 + 31 31 + const href = pubRecord 32 32 + ? `https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments` 33 33 + : `/p/${did}/${rkey}?interactionDrawer=comments`; 34 34 + 35 35 + const commenter = props.commenterHandle 36 36 + ? `@${props.commenterHandle}` 37 37 + : "Someone"; 38 38 + 39 39 + let actionText: React.ReactNode; 40 40 + let mentionedDocRecord = props.mentionedDocument 41 41 + ?.data as PubLeafletDocument.Record; 42 42 + 43 43 + if (props.mention_type === "did") { 44 44 + actionText = <>{commenter} mentioned you in a comment</>; 45 45 + } else if ( 46 46 + props.mention_type === "publication" && 47 47 + props.mentionedPublication 48 48 + ) { 49 49 + const mentionedPubRecord = props.mentionedPublication 50 50 + .record as PubLeafletPublication.Record; 51 51 + actionText = ( 52 52 + <> 53 53 + {commenter} mentioned your publication{" "} 54 54 + <span className="italic">{mentionedPubRecord.name}</span> in a comment 55 55 + </> 56 56 + ); 57 57 + } else if (props.mention_type === "document" && props.mentionedDocument) { 58 58 + actionText = ( 59 59 + <> 60 60 + {commenter} mentioned your post{" "} 61 61 + <span className="italic">{mentionedDocRecord.title}</span> in a comment 62 62 + </> 63 63 + ); 64 64 + } else { 65 65 + actionText = <>{commenter} mentioned you in a comment</>; 66 66 + } 67 67 + 68 68 + return ( 69 69 + <Notification 70 70 + timestamp={props.created_at} 71 71 + href={href} 72 72 + icon={<MentionTiny />} 73 73 + actionText={actionText} 74 74 + content={ 75 75 + <ContentLayout postTitle={docRecord?.title} pubRecord={pubRecord}> 76 76 + <CommentInNotification 77 77 + className="" 78 78 + avatar={ 79 79 + profileRecord?.avatar?.ref && 80 80 + blobRefToSrc( 81 81 + profileRecord?.avatar?.ref, 82 82 + props.commentData.bsky_profiles?.did || "", 83 83 + ) 84 84 + } 85 85 + displayName={ 86 86 + profileRecord?.displayName || 87 87 + props.commentData.bsky_profiles?.handle || 88 88 + "Someone" 89 89 + } 90 90 + index={[]} 91 91 + plaintext={commentRecord.plaintext} 92 92 + facets={commentRecord.facets} 93 93 + /> 94 94 + </ContentLayout> 95 95 + } 96 96 + /> 97 97 + ); 98 98 + };

+9 -3

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

··· 27 27 props.commentData.bsky_profiles?.handle || 28 28 "Someone"; 29 29 const pubRecord = props.commentData.documents?.documents_in_publications[0] 30 30 - ?.publications?.record as PubLeafletPublication.Record; 31 31 - let rkey = new AtUri(props.commentData.documents?.uri!).rkey; 30 30 + ?.publications?.record as PubLeafletPublication.Record | undefined; 31 31 + let docUri = new AtUri(props.commentData.documents?.uri!); 32 32 + let rkey = docUri.rkey; 33 33 + let did = docUri.host; 34 34 + 35 35 + const href = pubRecord 36 36 + ? `https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments` 37 37 + : `/p/${did}/${rkey}?interactionDrawer=comments`; 32 38 33 39 return ( 34 40 <Notification 35 41 timestamp={props.commentData.indexed_at} 36 36 - href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`} 42 42 + href={href} 37 43 icon={<CommentTiny />} 38 44 actionText={<>{displayName} commented on your post</>} 39 45 content={

+55 -40

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

··· 1 1 import { MentionTiny } from "components/Icons/MentionTiny"; 2 2 import { ContentLayout, Notification } from "./Notification"; 3 3 + import { HydratedMentionNotification } from "src/notifications"; 4 4 + import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 5 5 + import { Agent, AtUri } from "@atproto/api"; 3 6 4 4 - export const DummyPostMentionNotification = (props: {}) => { 5 5 - return ( 6 6 - <Notification 7 7 - timestamp={""} 8 8 - href="/" 9 9 - icon={<MentionTiny />} 10 10 - actionText={<>celine mentioned your post</>} 11 11 - content={ 12 12 - <ContentLayout 13 13 - postTitle={"Post Title Here"} 14 14 - pubRecord={{ name: "My Publication" } as any} 15 15 - > 16 16 - I'm just gonna put the description here. The surrounding context is 17 17 - just sort of a pain to figure out 18 18 - <div className="border border-border-light rounded-md p-1 my-1 text-xs text-secondary"> 19 19 - <div className="font-bold">Title of the Mentioned Post</div> 20 20 - <div className="text-tertiary"> 21 21 - And here is the description that follows it 22 22 - </div> 23 23 - </div> 24 24 - </ContentLayout> 25 25 - } 26 26 - /> 27 27 - ); 28 28 - }; 7 7 + export const MentionNotification = (props: HydratedMentionNotification) => { 8 8 + const docRecord = props.document.data as PubLeafletDocument.Record; 9 9 + const pubRecord = props.document.documents_in_publications?.[0]?.publications 10 10 + ?.record as PubLeafletPublication.Record | undefined; 11 11 + const docUri = new AtUri(props.document.uri); 12 12 + const rkey = docUri.rkey; 13 13 + const did = docUri.host; 14 14 + 15 15 + const href = pubRecord 16 16 + ? `https://${pubRecord.base_path}/${rkey}` 17 17 + : `/p/${did}/${rkey}`; 18 18 + 19 19 + let actionText: React.ReactNode; 20 20 + let mentionedItemName: string | undefined; 21 21 + let mentionedDocRecord = props.mentionedDocument 22 22 + ?.data as PubLeafletDocument.Record; 23 23 + 24 24 + const mentioner = props.documentCreatorHandle 25 25 + ? `@${props.documentCreatorHandle}` 26 26 + : "Someone"; 27 27 + 28 28 + if (props.mention_type === "did") { 29 29 + actionText = <>{mentioner} mentioned you</>; 30 30 + } else if ( 31 31 + props.mention_type === "publication" && 32 32 + props.mentionedPublication 33 33 + ) { 34 34 + const mentionedPubRecord = props.mentionedPublication 35 35 + .record as PubLeafletPublication.Record; 36 36 + mentionedItemName = mentionedPubRecord.name; 37 37 + actionText = ( 38 38 + <> 39 39 + {mentioner} mentioned your publication{" "} 40 40 + <span className="italic">{mentionedItemName}</span> 41 41 + </> 42 42 + ); 43 43 + } else if (props.mention_type === "document" && props.mentionedDocument) { 44 44 + mentionedItemName = mentionedDocRecord.title; 45 45 + actionText = ( 46 46 + <> 47 47 + {mentioner} mentioned your post{" "} 48 48 + <span className="italic">{mentionedItemName}</span> 49 49 + </> 50 50 + ); 51 51 + } else { 52 52 + actionText = <>{mentioner} mentioned you</>; 53 53 + } 29 54 30 30 - export const DummyUserMentionNotification = (props: { 31 31 - cardBorderHidden: boolean; 32 32 - }) => { 33 55 return ( 34 56 <Notification 35 35 - timestamp={""} 36 36 - href="/" 57 57 + timestamp={props.created_at} 58 58 + href={href} 37 59 icon={<MentionTiny />} 38 38 - actionText={<>celine mentioned you</>} 60 60 + actionText={actionText} 39 61 content={ 40 40 - <ContentLayout 41 41 - postTitle={"Post Title Here"} 42 42 - pubRecord={{ name: "My Publication" } as any} 43 43 - > 44 44 - <div> 45 45 - ...llo this is the content of a post or whatever here it comes{" "} 46 46 - <span className="text-accent-contrast">@celine </span> and here it 47 47 - was! ooooh heck yeah the high is unre... 48 48 - </div> 62 62 + <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}> 63 63 + {docRecord.description && docRecord.description} 49 64 </ContentLayout> 50 65 } 51 66 />

+3 -3

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

··· 69 69 <div 70 70 className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`} 71 71 > 72 72 - <div className="text-tertiary text-sm italic font-bold pb-1"> 72 72 + <div className="text-tertiary text-sm italic font-bold "> 73 73 {props.postTitle} 74 74 </div> 75 75 - {props.children} 75 75 + {props.children && <div className="mb-2 text-sm">{props.children}</div>} 76 76 {props.pubRecord && ( 77 77 <> 78 78 - <hr className="mt-3 mb-1 border-border-light" /> 78 78 + <hr className="mt-1 mb-1 border-border-light" /> 79 79 <a 80 80 href={`https://${props.pubRecord.base_path}`} 81 81 className="relative text-xs text-tertiary flex gap-[6px] items-center font-bold hover:no-underline!"

+12

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

··· 7 7 import { ReplyNotification } from "./ReplyNotification"; 8 8 import { useIdentityData } from "components/IdentityProvider"; 9 9 import { FollowNotification } from "./FollowNotification"; 10 10 + import { QuoteNotification } from "./QuoteNotification"; 11 11 + import { MentionNotification } from "./MentionNotification"; 12 12 + import { CommentMentionNotification } from "./CommentMentionNotification"; 10 13 11 14 export function NotificationList({ 12 15 notifications, ··· 41 44 } 42 45 if (n.type === "subscribe") { 43 46 return <FollowNotification key={n.id} {...n} />; 47 47 + } 48 48 + if (n.type === "quote") { 49 49 + return <QuoteNotification key={n.id} {...n} />; 50 50 + } 51 51 + if (n.type === "mention") { 52 52 + return <MentionNotification key={n.id} {...n} />; 53 53 + } 54 54 + if (n.type === "comment_mention") { 55 55 + return <CommentMentionNotification key={n.id} {...n} />; 44 56 } 45 57 })} 46 58 </div>

+48

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

··· 1 1 + import { QuoteTiny } from "components/Icons/QuoteTiny"; 2 2 + import { ContentLayout, Notification } from "./Notification"; 3 3 + import { HydratedQuoteNotification } from "src/notifications"; 4 4 + import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 5 5 + import { AtUri } from "@atproto/api"; 6 6 + import { Avatar } from "components/Avatar"; 7 7 + 8 8 + export const QuoteNotification = (props: HydratedQuoteNotification) => { 9 9 + const postView = props.bskyPost.post_view as any; 10 10 + const author = postView.author; 11 11 + const displayName = author.displayName || author.handle || "Someone"; 12 12 + const docRecord = props.document.data as PubLeafletDocument.Record; 13 13 + const pubRecord = props.document.documents_in_publications[0]?.publications 14 14 + ?.record as PubLeafletPublication.Record | undefined; 15 15 + const docUri = new AtUri(props.document.uri); 16 16 + const rkey = docUri.rkey; 17 17 + const did = docUri.host; 18 18 + const postText = postView.record?.text || ""; 19 19 + 20 20 + const href = pubRecord 21 21 + ? `https://${pubRecord.base_path}/${rkey}` 22 22 + : `/p/${did}/${rkey}`; 23 23 + 24 24 + return ( 25 25 + <Notification 26 26 + timestamp={props.created_at} 27 27 + href={href} 28 28 + icon={<QuoteTiny />} 29 29 + actionText={<>{displayName} quoted your post</>} 30 30 + content={ 31 31 + <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}> 32 32 + <div className="flex gap-2 text-sm w-full"> 33 33 + <Avatar 34 34 + src={author.avatar} 35 35 + displayName={displayName} 36 36 + /> 37 37 + <pre 38 38 + style={{ wordBreak: "break-word" }} 39 39 + className="whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6" 40 40 + > 41 41 + {postText} 42 42 + </pre> 43 43 + </div> 44 44 + </ContentLayout> 45 45 + } 46 46 + /> 47 47 + ); 48 48 + };

+9 -3

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

··· 34 34 props.parentData?.bsky_profiles?.handle || 35 35 "Someone"; 36 36 37 37 - let rkey = new AtUri(props.commentData.documents?.uri!).rkey; 37 37 + let docUri = new AtUri(props.commentData.documents?.uri!); 38 38 + let rkey = docUri.rkey; 39 39 + let did = docUri.host; 38 40 const pubRecord = props.commentData.documents?.documents_in_publications[0] 39 39 - ?.publications?.record as PubLeafletPublication.Record; 41 41 + ?.publications?.record as PubLeafletPublication.Record | undefined; 42 42 + 43 43 + const href = pubRecord 44 44 + ? `https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments` 45 45 + : `/p/${did}/${rkey}?interactionDrawer=comments`; 40 46 41 47 return ( 42 48 <Notification 43 49 timestamp={props.commentData.indexed_at} 44 44 - href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`} 50 50 + href={href} 45 51 icon={<ReplyTiny />} 46 52 actionText={`${displayName} replied to your comment`} 47 53 content={

+7 -192

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

··· 1 1 "use client"; 2 2 - import { AtUri } from "@atproto/api"; 3 3 - import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 4 4 - import { PubIcon } from "components/ActionBar/Publications"; 5 2 import { ButtonPrimary } from "components/Buttons"; 6 6 - import { CommentTiny } from "components/Icons/CommentTiny"; 7 3 import { DiscoverSmall } from "components/Icons/DiscoverSmall"; 8 8 - import { QuoteTiny } from "components/Icons/QuoteTiny"; 9 9 - import { Separator } from "components/Layout"; 10 10 - import { SpeedyLink } from "components/SpeedyLink"; 11 11 - import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider"; 12 12 - import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider"; 13 13 - import { useSmoker } from "components/Toast"; 14 14 - import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 15 15 - import { blobRefToSrc } from "src/utils/blobRefToSrc"; 16 16 - import { Json } from "supabase/database.types"; 17 4 import type { Cursor, Post } from "./getReaderFeed"; 18 5 import useSWRInfinite from "swr/infinite"; 19 6 import { getReaderFeed } from "./getReaderFeed"; 20 7 import { useEffect, useRef } from "react"; 21 21 - import { useRouter } from "next/navigation"; 22 8 import Link from "next/link"; 23 23 - import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 9 9 + import { PostListing } from "components/PostListing"; 24 10 25 11 export const ReaderContent = (props: { 26 12 posts: Post[]; ··· 28 14 }) => { 29 15 const getKey = ( 30 16 pageIndex: number, 31 31 - previousPageData: { posts: Post[]; nextCursor: Cursor | null } | null, 17 17 + previousPageData: { 18 18 + posts: Post[]; 19 19 + nextCursor: Cursor | null; 20 20 + } | null, 32 21 ) => { 33 22 // Reached the end 34 23 if (previousPageData && !previousPageData.nextCursor) return null; ··· 40 29 return ["reader-feed", previousPageData?.nextCursor] as const; 41 30 }; 42 31 43 43 - const { data, error, size, setSize, isValidating } = useSWRInfinite( 32 32 + const { data, size, setSize, isValidating } = useSWRInfinite( 44 33 getKey, 45 34 ([_, cursor]) => getReaderFeed(cursor), 46 35 { ··· 79 68 return ( 80 69 <div className="flex flex-col gap-3 relative"> 81 70 {allPosts.map((p) => ( 82 82 - <Post {...p} key={p.documents.uri} /> 71 71 + <PostListing {...p} key={p.documents.uri} /> 83 72 ))} 84 73 {/* Trigger element for loading more posts */} 85 74 <div ··· 96 85 ); 97 86 }; 98 87 99 99 - const Post = (props: Post) => { 100 100 - let pubRecord = props.publication.pubRecord as PubLeafletPublication.Record; 101 101 - 102 102 - let postRecord = props.documents.data as PubLeafletDocument.Record; 103 103 - let postUri = new AtUri(props.documents.uri); 104 104 - 105 105 - let theme = usePubTheme(pubRecord); 106 106 - let backgroundImage = pubRecord?.theme?.backgroundImage?.image?.ref 107 107 - ? blobRefToSrc( 108 108 - pubRecord?.theme?.backgroundImage?.image?.ref, 109 109 - new AtUri(props.publication.uri).host, 110 110 - ) 111 111 - : null; 112 112 - 113 113 - let backgroundImageRepeat = pubRecord?.theme?.backgroundImage?.repeat; 114 114 - let backgroundImageSize = pubRecord?.theme?.backgroundImage?.width || 500; 115 115 - 116 116 - let showPageBackground = pubRecord.theme?.showPageBackground; 117 117 - 118 118 - let quotes = props.documents.document_mentions_in_bsky?.[0]?.count || 0; 119 119 - let comments = 120 120 - pubRecord.preferences?.showComments === false 121 121 - ? 0 122 122 - : props.documents.comments_on_documents?.[0]?.count || 0; 123 123 - 124 124 - return ( 125 125 - <BaseThemeProvider {...theme} local> 126 126 - <div 127 127 - style={{ 128 128 - backgroundImage: `url(${backgroundImage})`, 129 129 - backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", 130 130 - backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`, 131 131 - }} 132 132 - className={`no-underline! flex flex-row gap-2 w-full relative 133 133 - bg-bg-leaflet 134 134 - border border-border-light rounded-lg 135 135 - sm:p-2 p-2 selected-outline 136 136 - hover:outline-accent-contrast hover:border-accent-contrast 137 137 - `} 138 138 - > 139 139 - <a 140 140 - className="h-full w-full absolute top-0 left-0" 141 141 - href={`${props.publication.href}/${postUri.rkey}`} 142 142 - /> 143 143 - <div 144 144 - className={`${showPageBackground ? "bg-bg-page " : "bg-transparent"} rounded-md w-full px-[10px] pt-2 pb-2`} 145 145 - style={{ 146 146 - backgroundColor: showPageBackground 147 147 - ? "rgba(var(--bg-page), var(--bg-page-alpha))" 148 148 - : "transparent", 149 149 - }} 150 150 - > 151 151 - <h3 className="text-primary truncate">{postRecord.title}</h3> 152 152 - 153 153 - <p className="text-secondary">{postRecord.description}</p> 154 154 - <div className="flex gap-2 justify-between items-end"> 155 155 - <div className="flex flex-col-reverse md:flex-row md gap-3 md:gap-2 text-sm text-tertiary items-start justify-start pt-1 md:pt-3"> 156 156 - <PubInfo 157 157 - href={props.publication.href} 158 158 - pubRecord={pubRecord} 159 159 - uri={props.publication.uri} 160 160 - /> 161 161 - <Separator classname="h-4 !min-h-0 md:block hidden" /> 162 162 - <PostInfo 163 163 - author={props.author || ""} 164 164 - publishedAt={postRecord.publishedAt} 165 165 - /> 166 166 - </div> 167 167 - 168 168 - <PostInterations 169 169 - postUrl={`${props.publication.href}/${postUri.rkey}`} 170 170 - quotesCount={quotes} 171 171 - commentsCount={comments} 172 172 - showComments={pubRecord.preferences?.showComments} 173 173 - /> 174 174 - </div> 175 175 - </div> 176 176 - </div> 177 177 - </BaseThemeProvider> 178 178 - ); 179 179 - }; 180 180 - 181 181 - const PubInfo = (props: { 182 182 - href: string; 183 183 - pubRecord: PubLeafletPublication.Record; 184 184 - uri: string; 185 185 - }) => { 186 186 - return ( 187 187 - <a 188 188 - href={props.href} 189 189 - className="text-accent-contrast font-bold no-underline text-sm flex gap-1 items-center md:w-fit w-full relative shrink-0" 190 190 - > 191 191 - <PubIcon small record={props.pubRecord} uri={props.uri} /> 192 192 - {props.pubRecord.name} 193 193 - </a> 194 194 - ); 195 195 - }; 196 196 - 197 197 - const PostInfo = (props: { 198 198 - author: string; 199 199 - publishedAt: string | undefined; 200 200 - }) => { 201 201 - const formattedDate = useLocalizedDate( 202 202 - props.publishedAt || new Date().toISOString(), 203 203 - { 204 204 - year: "numeric", 205 205 - month: "short", 206 206 - day: "numeric", 207 207 - }, 208 208 - ); 209 209 - 210 210 - return ( 211 211 - <div className="flex flex-wrap gap-2 grow items-center shrink-0"> 212 212 - {props.author} 213 213 - {props.publishedAt && ( 214 214 - <> 215 215 - <Separator classname="h-4 !min-h-0" /> 216 216 - {formattedDate}{" "} 217 217 - </> 218 218 - )} 219 219 - </div> 220 220 - ); 221 221 - }; 222 222 - 223 223 - const PostInterations = (props: { 224 224 - quotesCount: number; 225 225 - commentsCount: number; 226 226 - postUrl: string; 227 227 - showComments: boolean | undefined; 228 228 - }) => { 229 229 - let smoker = useSmoker(); 230 230 - let interactionsAvailable = 231 231 - props.quotesCount > 0 || 232 232 - (props.showComments !== false && props.commentsCount > 0); 233 233 - 234 234 - return ( 235 235 - <div className={`flex gap-2 text-tertiary text-sm items-center`}> 236 236 - {props.quotesCount === 0 ? null : ( 237 237 - <div className={`flex gap-1 items-center `} aria-label="Post quotes"> 238 238 - <QuoteTiny aria-hidden /> {props.quotesCount} 239 239 - </div> 240 240 - )} 241 241 - {props.showComments === false || props.commentsCount === 0 ? null : ( 242 242 - <div className={`flex gap-1 items-center`} aria-label="Post comments"> 243 243 - <CommentTiny aria-hidden /> {props.commentsCount} 244 244 - </div> 245 245 - )} 246 246 - {interactionsAvailable && <Separator classname="h-4 !min-h-0" />} 247 247 - <button 248 248 - id={`copy-post-link-${props.postUrl}`} 249 249 - className="flex gap-1 items-center hover:font-bold relative" 250 250 - onClick={(e) => { 251 251 - e.stopPropagation(); 252 252 - e.preventDefault(); 253 253 - let mouseX = e.clientX; 254 254 - let mouseY = e.clientY; 255 255 - 256 256 - if (!props.postUrl) return; 257 257 - navigator.clipboard.writeText(`leaflet.pub${props.postUrl}`); 258 258 - 259 259 - smoker({ 260 260 - text: <strong>Copied Link!</strong>, 261 261 - position: { 262 262 - y: mouseY, 263 263 - x: mouseX, 264 264 - }, 265 265 - }); 266 266 - }} 267 267 - > 268 268 - Share 269 269 - </button> 270 270 - </div> 271 271 - ); 272 272 - }; 273 88 export const ReaderEmpty = () => { 274 89 return ( 275 90 <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">

+68

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

··· 1 1 + "use server"; 2 2 + 3 3 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 4 4 + import { supabaseServerClient } from "supabase/serverClient"; 5 5 + import { AtUri } from "@atproto/api"; 6 6 + import { Json } from "supabase/database.types"; 7 7 + import { idResolver } from "app/(home-pages)/reader/idResolver"; 8 8 + import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 9 9 + 10 10 + export async function getDocumentsByTag( 11 11 + tag: string, 12 12 + ): Promise<{ posts: Post[] }> { 13 13 + // Query documents that have this tag 14 14 + const { data: documents, error } = await supabaseServerClient 15 15 + .from("documents") 16 16 + .select( 17 17 + `*, 18 18 + comments_on_documents(count), 19 19 + document_mentions_in_bsky(count), 20 20 + documents_in_publications(publications(*))`, 21 21 + ) 22 22 + .contains("data->tags", `["${tag}"]`) 23 23 + .order("indexed_at", { ascending: false }) 24 24 + .limit(50); 25 25 + 26 26 + if (error) { 27 27 + console.error("Error fetching documents by tag:", error); 28 28 + return { posts: [] }; 29 29 + } 30 30 + 31 31 + const posts = await Promise.all( 32 32 + documents.map(async (doc) => { 33 33 + const pub = doc.documents_in_publications[0]?.publications; 34 34 + 35 35 + // Skip if document doesn't have a publication 36 36 + if (!pub) { 37 37 + return null; 38 38 + } 39 39 + 40 40 + const uri = new AtUri(doc.uri); 41 41 + const handle = await idResolver.did.resolve(uri.host); 42 42 + 43 43 + const post: Post = { 44 44 + publication: { 45 45 + href: getPublicationURL(pub), 46 46 + pubRecord: pub?.record || null, 47 47 + uri: pub?.uri || "", 48 48 + }, 49 49 + author: handle?.alsoKnownAs?.[0] 50 50 + ? `@${handle.alsoKnownAs[0].slice(5)}` 51 51 + : null, 52 52 + documents: { 53 53 + comments_on_documents: doc.comments_on_documents, 54 54 + document_mentions_in_bsky: doc.document_mentions_in_bsky, 55 55 + data: doc.data, 56 56 + uri: doc.uri, 57 57 + indexed_at: doc.indexed_at, 58 58 + }, 59 59 + }; 60 60 + return post; 61 61 + }), 62 62 + ); 63 63 + 64 64 + // Filter out null entries (documents without publications) 65 65 + return { 66 66 + posts: posts.filter((p): p is Post => p !== null), 67 67 + }; 68 68 + }

+75

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

··· 1 1 + import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; 2 2 + import { Tag } from "components/Tags"; 3 3 + import { PostListing } from "components/PostListing"; 4 4 + import { getDocumentsByTag } from "./getDocumentsByTag"; 5 5 + import { TagTiny } from "components/Icons/TagTiny"; 6 6 + 7 7 + export default async function TagPage(props: { 8 8 + params: Promise<{ tag: string }>; 9 9 + }) { 10 10 + const params = await props.params; 11 11 + const decodedTag = decodeURIComponent(params.tag); 12 12 + const { posts } = await getDocumentsByTag(decodedTag); 13 13 + 14 14 + return ( 15 15 + <DashboardLayout 16 16 + id="tag" 17 17 + cardBorderHidden={false} 18 18 + currentPage="tag" 19 19 + defaultTab="default" 20 20 + actions={null} 21 21 + tabs={{ 22 22 + default: { 23 23 + controls: null, 24 24 + content: <TagContent tag={decodedTag} posts={posts} />, 25 25 + }, 26 26 + }} 27 27 + /> 28 28 + ); 29 29 + } 30 30 + 31 31 + const TagContent = (props: { 32 32 + tag: string; 33 33 + posts: Awaited<ReturnType<typeof getDocumentsByTag>>["posts"]; 34 34 + }) => { 35 35 + return ( 36 36 + <div className="max-w-prose mx-auto w-full grow shrink-0"> 37 37 + <div className="discoverHeader flex flex-col gap-3 items-center text-center pt-2 px-4"> 38 38 + <TagHeader tag={props.tag} postCount={props.posts.length} /> 39 39 + </div> 40 40 + <div className="pt-6 flex flex-col gap-3"> 41 41 + {props.posts.length === 0 ? ( 42 42 + <EmptyState tag={props.tag} /> 43 43 + ) : ( 44 44 + props.posts.map((post) => ( 45 45 + <PostListing key={post.documents.uri} {...post} /> 46 46 + )) 47 47 + )} 48 48 + </div> 49 49 + </div> 50 50 + ); 51 51 + }; 52 52 + 53 53 + const TagHeader = (props: { tag: string; postCount: number }) => { 54 54 + return ( 55 55 + <div className="flex flex-col leading-tight items-center"> 56 56 + <div className="flex items-center gap-3 text-xl font-bold text-primary"> 57 57 + <TagTiny className="scale-150" /> 58 58 + <h1>{props.tag}</h1> 59 59 + </div> 60 60 + <div className="text-tertiary text-sm"> 61 61 + {props.postCount} {props.postCount === 1 ? "post" : "posts"} 62 62 + </div> 63 63 + </div> 64 64 + ); 65 65 + }; 66 66 + 67 67 + const EmptyState = (props: { tag: string }) => { 68 68 + return ( 69 69 + <div className="flex flex-col gap-2 items-center justify-center p-8 text-center"> 70 70 + <div className="text-tertiary"> 71 71 + No posts found with the tag "{props.tag}" 72 72 + </div> 73 73 + </div> 74 74 + ); 75 75 + };

-98

app/[leaflet_id]/Actions.tsx

··· 1 1 - import { publishToPublication } from "actions/publishToPublication"; 2 2 - import { 3 3 - getBasePublicationURL, 4 4 - getPublicationURL, 5 5 - } from "app/lish/createPub/getPublicationURL"; 6 6 - import { ActionButton } from "components/ActionBar/ActionButton"; 7 7 - import { GoBackSmall } from "components/Icons/GoBackSmall"; 8 8 - import { PublishSmall } from "components/Icons/PublishSmall"; 9 9 - import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 10 10 - import { SpeedyLink } from "components/SpeedyLink"; 11 11 - import { useToaster } from "components/Toast"; 12 12 - import { DotLoader } from "components/utils/DotLoader"; 13 13 - import { useParams, useRouter } from "next/navigation"; 14 14 - import { useState } from "react"; 15 15 - import { useReplicache } from "src/replicache"; 16 16 - import { Json } from "supabase/database.types"; 17 17 - 18 18 - export const BackToPubButton = (props: { 19 19 - publication: { 20 20 - identity_did: string; 21 21 - indexed_at: string; 22 22 - name: string; 23 23 - record: Json; 24 24 - uri: string; 25 25 - }; 26 26 - }) => { 27 27 - return ( 28 28 - <SpeedyLink 29 29 - href={`${getBasePublicationURL(props.publication)}/dashboard`} 30 30 - className="hover:no-underline!" 31 31 - > 32 32 - <ActionButton 33 33 - icon={<GoBackSmall className="shrink-0" />} 34 34 - label="To Pub" 35 35 - /> 36 36 - </SpeedyLink> 37 37 - ); 38 38 - }; 39 39 - 40 40 - export const PublishButton = () => { 41 41 - let { data: pub } = useLeafletPublicationData(); 42 42 - let params = useParams(); 43 43 - let router = useRouter(); 44 44 - if (!pub?.doc) 45 45 - return ( 46 46 - <ActionButton 47 47 - primary 48 48 - icon={<PublishSmall className="shrink-0" />} 49 49 - label={"Publish!"} 50 50 - onClick={() => { 51 51 - router.push(`/${params.leaflet_id}/publish`); 52 52 - }} 53 53 - /> 54 54 - ); 55 55 - 56 56 - return <UpdateButton />; 57 57 - }; 58 58 - 59 59 - const UpdateButton = () => { 60 60 - let [isLoading, setIsLoading] = useState(false); 61 61 - let { data: pub, mutate } = useLeafletPublicationData(); 62 62 - let { permission_token, rootEntity } = useReplicache(); 63 63 - let toaster = useToaster(); 64 64 - 65 65 - return ( 66 66 - <ActionButton 67 67 - primary 68 68 - icon={<PublishSmall className="shrink-0" />} 69 69 - label={isLoading ? <DotLoader /> : "Update!"} 70 70 - onClick={async () => { 71 71 - if (!pub || !pub.publications) return; 72 72 - setIsLoading(true); 73 73 - let doc = await publishToPublication({ 74 74 - root_entity: rootEntity, 75 75 - publication_uri: pub.publications.uri, 76 76 - leaflet_id: permission_token.id, 77 77 - title: pub.title, 78 78 - description: pub.description, 79 79 - }); 80 80 - setIsLoading(false); 81 81 - mutate(); 82 82 - toaster({ 83 83 - content: ( 84 84 - <div> 85 85 - {pub.doc ? "Updated! " : "Published! "} 86 86 - <SpeedyLink 87 87 - href={`${getPublicationURL(pub.publications)}/${doc?.rkey}`} 88 88 - > 89 89 - link 90 90 - </SpeedyLink> 91 91 - </div> 92 92 - ), 93 93 - type: "success", 94 94 - }); 95 95 - }} 96 96 - /> 97 97 - ); 98 98 - };

+16 -20

app/[leaflet_id]/Footer.tsx

··· 4 4 import { Media } from "components/Media"; 5 5 import { ThemePopover } from "components/ThemeManager/ThemeSetter"; 6 6 import { Toolbar } from "components/Toolbar"; 7 7 - import { ShareOptions } from "components/ShareOptions"; 8 8 - import { HomeButton } from "components/HomeButton"; 7 7 + import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions"; 8 8 + import { HomeButton } from "app/[leaflet_id]/actions/HomeButton"; 9 9 + import { PublishButton } from "./actions/PublishButton"; 9 10 import { useEntitySetContext } from "components/EntitySetProvider"; 10 10 - import { HelpPopover } from "components/HelpPopover"; 11 11 + import { HelpButton } from "app/[leaflet_id]/actions/HelpButton"; 11 12 import { Watermark } from "components/Watermark"; 12 12 - import { BackToPubButton, PublishButton } from "./Actions"; 13 13 + import { BackToPubButton } from "./actions/BackToPubButton"; 13 14 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 14 15 import { useIdentityData } from "components/IdentityProvider"; 15 16 ··· 36 37 /> 37 38 </div> 38 39 ) : entity_set.permissions.write ? ( 39 39 - pub?.publications && 40 40 - identity?.atp_did && 41 41 - pub.publications.identity_did === identity.atp_did ? ( 42 42 - <ActionFooter> 40 40 + <ActionFooter> 41 41 + {pub?.publications && 42 42 + identity?.atp_did && 43 43 + pub.publications.identity_did === identity.atp_did ? ( 43 44 <BackToPubButton publication={pub.publications} /> 44 44 - <PublishButton /> 45 45 - <ShareOptions /> 46 46 - <HelpPopover /> 47 47 - <ThemePopover entityID={props.entityID} /> 48 48 - </ActionFooter> 49 49 - ) : ( 50 50 - <ActionFooter> 45 45 + ) : ( 51 46 <HomeButton /> 52 52 - <ShareOptions /> 53 53 - <HelpPopover /> 54 54 - <ThemePopover entityID={props.entityID} /> 55 55 - </ActionFooter> 56 56 - ) 47 47 + )} 48 48 + 49 49 + <PublishButton entityID={props.entityID} /> 50 50 + <ShareOptions /> 51 51 + <ThemePopover entityID={props.entityID} /> 52 52 + </ActionFooter> 57 53 ) : ( 58 54 <div className="pb-2 px-2 z-10 flex justify-end"> 59 55 <Watermark mobile />

+12 -28

app/[leaflet_id]/Sidebar.tsx

··· 1 1 "use client"; 2 2 - import { ActionButton } from "components/ActionBar/ActionButton"; 3 2 import { Sidebar } from "components/ActionBar/Sidebar"; 4 3 import { useEntitySetContext } from "components/EntitySetProvider"; 5 5 - import { HelpPopover } from "components/HelpPopover"; 6 6 - import { HomeButton } from "components/HomeButton"; 4 4 + import { HelpButton } from "app/[leaflet_id]/actions/HelpButton"; 5 5 + import { HomeButton } from "app/[leaflet_id]/actions/HomeButton"; 7 6 import { Media } from "components/Media"; 8 7 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 9 9 - import { ShareOptions } from "components/ShareOptions"; 8 8 + import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions"; 10 9 import { ThemePopover } from "components/ThemeManager/ThemeSetter"; 10 10 + import { PublishButton } from "./actions/PublishButton"; 11 11 import { Watermark } from "components/Watermark"; 12 12 - import { useUIState } from "src/useUIState"; 13 13 - import { BackToPubButton, PublishButton } from "./Actions"; 12 12 + import { BackToPubButton } from "./actions/BackToPubButton"; 14 13 import { useIdentityData } from "components/IdentityProvider"; 15 14 import { useReplicache } from "src/replicache"; 16 15 ··· 29 28 <div className="sidebarContainer flex flex-col justify-end h-full w-16 relative"> 30 29 {entity_set.permissions.write && ( 31 30 <Sidebar> 31 31 + <PublishButton entityID={rootEntity} /> 32 32 + <ShareOptions /> 33 33 + <ThemePopover entityID={rootEntity} /> 34 34 + <HelpButton /> 35 35 + <hr className="text-border" /> 32 36 {pub?.publications && 33 37 identity?.atp_did && 34 38 pub.publications.identity_did === identity.atp_did ? ( 35 35 - <> 36 36 - <PublishButton /> 37 37 - <ShareOptions /> 38 38 - <ThemePopover entityID={rootEntity} /> 39 39 - <HelpPopover /> 40 40 - <hr className="text-border" /> 41 41 - <BackToPubButton publication={pub.publications} /> 42 42 - </> 39 39 + <BackToPubButton publication={pub.publications} /> 43 40 ) : ( 44 44 - <> 45 45 - <ShareOptions /> 46 46 - <ThemePopover entityID={rootEntity} /> 47 47 - <HelpPopover /> 48 48 - <hr className="text-border" /> 49 49 - <HomeButton /> 50 50 - </> 41 41 + <HomeButton /> 51 42 )} 52 43 </Sidebar> 53 44 )} ··· 59 50 </Media> 60 51 ); 61 52 } 62 62 - 63 63 - const blurPage = () => { 64 64 - useUIState.setState(() => ({ 65 65 - focusedEntity: null, 66 66 - selectedBlocks: [], 67 67 - })); 68 68 - };

+27

app/[leaflet_id]/actions/BackToPubButton.tsx

··· 1 1 + import { getBasePublicationURL } from "app/lish/createPub/getPublicationURL"; 2 2 + import { ActionButton } from "components/ActionBar/ActionButton"; 3 3 + import { GoBackSmall } from "components/Icons/GoBackSmall"; 4 4 + import { SpeedyLink } from "components/SpeedyLink"; 5 5 + import { Json } from "supabase/database.types"; 6 6 + 7 7 + export const BackToPubButton = (props: { 8 8 + publication: { 9 9 + identity_did: string; 10 10 + indexed_at: string; 11 11 + name: string; 12 12 + record: Json; 13 13 + uri: string; 14 14 + }; 15 15 + }) => { 16 16 + return ( 17 17 + <SpeedyLink 18 18 + href={`${getBasePublicationURL(props.publication)}/dashboard`} 19 19 + className="hover:no-underline!" 20 20 + > 21 21 + <ActionButton 22 22 + icon={<GoBackSmall className="shrink-0" />} 23 23 + label="To Pub" 24 24 + /> 25 25 + </SpeedyLink> 26 26 + ); 27 27 + };

+173

app/[leaflet_id]/actions/HelpButton.tsx

··· 1 1 + "use client"; 2 2 + import { ShortcutKey } from "../../../components/Layout"; 3 3 + import { Media } from "../../../components/Media"; 4 4 + import { Popover } from "../../../components/Popover"; 5 5 + import { metaKey } from "src/utils/metaKey"; 6 6 + import { useEntitySetContext } from "../../../components/EntitySetProvider"; 7 7 + import { useState } from "react"; 8 8 + import { ActionButton } from "components/ActionBar/ActionButton"; 9 9 + import { HelpSmall } from "../../../components/Icons/HelpSmall"; 10 10 + import { isMac } from "src/utils/isDevice"; 11 11 + import { useIsMobile } from "src/hooks/isMobile"; 12 12 + 13 13 + export const HelpButton = (props: { noShortcuts?: boolean }) => { 14 14 + let entity_set = useEntitySetContext(); 15 15 + let isMobile = useIsMobile(); 16 16 + 17 17 + return entity_set.permissions.write ? ( 18 18 + <Popover 19 19 + side={isMobile ? "top" : "right"} 20 20 + align={isMobile ? "center" : "start"} 21 21 + asChild 22 22 + className="max-w-xs w-full" 23 23 + trigger={<ActionButton icon={<HelpSmall />} label="About" />} 24 24 + > 25 25 + <div className="flex flex-col text-sm gap-2 text-secondary"> 26 26 + {/* about links */} 27 27 + <HelpLink text="📖 Leaflet Manual" url="https://about.leaflet.pub" /> 28 28 + <HelpLink text="💡 Make with Leaflet" url="https://make.leaflet.pub" /> 29 29 + <HelpLink 30 30 + text="✨ Explore Publications" 31 31 + url="https://leaflet.pub/discover" 32 32 + /> 33 33 + <HelpLink text="📣 Newsletter" url="https://buttondown.com/leaflet" /> 34 34 + {/* contact links */} 35 35 + <div className="columns-2 gap-2"> 36 36 + <HelpLink 37 37 + text="🦋 Bluesky" 38 38 + url="https://bsky.app/profile/leaflet.pub" 39 39 + /> 40 40 + <HelpLink text="💌 Email" url="mailto:contact@leaflet.pub" /> 41 41 + </div> 42 42 + {/* keyboard shortcuts: desktop only */} 43 43 + <Media mobile={false}> 44 44 + {!props.noShortcuts && ( 45 45 + <> 46 46 + <hr className="text-border my-1" /> 47 47 + <div className="flex flex-col gap-1"> 48 48 + <Label>Text Shortcuts</Label> 49 49 + <KeyboardShortcut name="Bold" keys={[metaKey(), "B"]} /> 50 50 + <KeyboardShortcut name="Italic" keys={[metaKey(), "I"]} /> 51 51 + <KeyboardShortcut name="Underline" keys={[metaKey(), "U"]} /> 52 52 + <KeyboardShortcut 53 53 + name="Highlight" 54 54 + keys={[metaKey(), isMac() ? "Ctrl" : "Meta", "H"]} 55 55 + /> 56 56 + <KeyboardShortcut 57 57 + name="Strikethrough" 58 58 + keys={[metaKey(), isMac() ? "Ctrl" : "Meta", "X"]} 59 59 + /> 60 60 + <KeyboardShortcut name="Inline Link" keys={[metaKey(), "K"]} /> 61 61 + 62 62 + <Label>Block Shortcuts</Label> 63 63 + {/* shift + up/down arrows (or click + drag): select multiple blocks */} 64 64 + <KeyboardShortcut 65 65 + name="Move Block Up" 66 66 + keys={["Shift", metaKey(), "↑"]} 67 67 + /> 68 68 + <KeyboardShortcut 69 69 + name="Move Block Down" 70 70 + keys={["Shift", metaKey(), "↓"]} 71 71 + /> 72 72 + {/* cmd/ctrl-a: first selects all text in a block; again selects all blocks on page */} 73 73 + {/* cmd/ctrl + up/down arrows: go to beginning / end of doc */} 74 74 + 75 75 + <Label>Canvas Shortcuts</Label> 76 76 + <OtherShortcut name="Add Block" description="Double click" /> 77 77 + <OtherShortcut name="Select Block" description="Long press" /> 78 78 + 79 79 + <Label>Outliner Shortcuts</Label> 80 80 + <KeyboardShortcut 81 81 + name="Make List" 82 82 + keys={[metaKey(), isMac() ? "Opt" : "Alt", "L"]} 83 83 + /> 84 84 + {/* tab / shift + tab: indent / outdent */} 85 85 + <KeyboardShortcut 86 86 + name="Toggle Checkbox" 87 87 + keys={[metaKey(), "Enter"]} 88 88 + /> 89 89 + <KeyboardShortcut 90 90 + name="Toggle Fold" 91 91 + keys={[metaKey(), "Shift", "Enter"]} 92 92 + /> 93 93 + <KeyboardShortcut 94 94 + name="Fold All" 95 95 + keys={[metaKey(), isMac() ? "Opt" : "Alt", "Shift", "↑"]} 96 96 + /> 97 97 + <KeyboardShortcut 98 98 + name="Unfold All" 99 99 + keys={[metaKey(), isMac() ? "Opt" : "Alt", "Shift", "↓"]} 100 100 + /> 101 101 + </div> 102 102 + </> 103 103 + )} 104 104 + </Media> 105 105 + {/* links: terms and privacy */} 106 106 + <hr className="text-border my-1" /> 107 107 + {/* <HelpLink 108 108 + text="Terms and Privacy Policy" 109 109 + url="https://leaflet.pub/legal" 110 110 + /> */} 111 111 + <div> 112 112 + <a href="https://leaflet.pub/legal" target="_blank"> 113 113 + Terms and Privacy Policy 114 114 + </a> 115 115 + </div> 116 116 + </div> 117 117 + </Popover> 118 118 + ) : null; 119 119 + }; 120 120 + 121 121 + const KeyboardShortcut = (props: { name: string; keys: string[] }) => { 122 122 + return ( 123 123 + <div className="flex gap-2 justify-between items-center"> 124 124 + {props.name} 125 125 + <div className="flex gap-1 items-center font-bold"> 126 126 + {props.keys.map((key, index) => { 127 127 + return <ShortcutKey key={index}>{key}</ShortcutKey>; 128 128 + })} 129 129 + </div> 130 130 + </div> 131 131 + ); 132 132 + }; 133 133 + 134 134 + const OtherShortcut = (props: { name: string; description: string }) => { 135 135 + return ( 136 136 + <div className="flex justify-between items-center"> 137 137 + <span>{props.name}</span> 138 138 + <span> 139 139 + <strong>{props.description}</strong> 140 140 + </span> 141 141 + </div> 142 142 + ); 143 143 + }; 144 144 + 145 145 + const Label = (props: { children: React.ReactNode }) => { 146 146 + return <div className="text-tertiary font-bold pt-2 ">{props.children}</div>; 147 147 + }; 148 148 + 149 149 + const HelpLink = (props: { url: string; text: string }) => { 150 150 + const [isHovered, setIsHovered] = useState(false); 151 151 + const handleMouseEnter = () => { 152 152 + setIsHovered(true); 153 153 + }; 154 154 + const handleMouseLeave = () => { 155 155 + setIsHovered(false); 156 156 + }; 157 157 + return ( 158 158 + <a 159 159 + href={props.url} 160 160 + target="_blank" 161 161 + className="py-2 px-2 rounded-md flex flex-col gap-1 bg-border-light hover:bg-border hover:no-underline" 162 162 + style={{ 163 163 + backgroundColor: isHovered 164 164 + ? "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)" 165 165 + : "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 75%)", 166 166 + }} 167 167 + onMouseEnter={handleMouseEnter} 168 168 + onMouseLeave={handleMouseLeave} 169 169 + > 170 170 + <strong>{props.text}</strong> 171 171 + </a> 172 172 + ); 173 173 + };

+74

app/[leaflet_id]/actions/HomeButton.tsx

··· 1 1 + "use client"; 2 2 + import Link from "next/link"; 3 3 + import { useEntitySetContext } from "../../../components/EntitySetProvider"; 4 4 + import { ActionButton } from "components/ActionBar/ActionButton"; 5 5 + import { useSearchParams } from "next/navigation"; 6 6 + import { useIdentityData } from "../../../components/IdentityProvider"; 7 7 + import { useReplicache } from "src/replicache"; 8 8 + import { addLeafletToHome } from "actions/addLeafletToHome"; 9 9 + import { useSmoker } from "../../../components/Toast"; 10 10 + import { AddToHomeSmall } from "../../../components/Icons/AddToHomeSmall"; 11 11 + import { HomeSmall } from "../../../components/Icons/HomeSmall"; 12 12 + import { produce } from "immer"; 13 13 + 14 14 + export function HomeButton() { 15 15 + let { permissions } = useEntitySetContext(); 16 16 + let searchParams = useSearchParams(); 17 17 + 18 18 + return ( 19 19 + <> 20 20 + <Link 21 21 + href="/home" 22 22 + prefetch 23 23 + className="hover:no-underline" 24 24 + style={{ textDecorationLine: "none !important" }} 25 25 + > 26 26 + <ActionButton icon={<HomeSmall />} label="Go Home" /> 27 27 + </Link> 28 28 + {<AddToHomeButton />} 29 29 + </> 30 30 + ); 31 31 + } 32 32 + 33 33 + const AddToHomeButton = (props: {}) => { 34 34 + let { permission_token } = useReplicache(); 35 35 + let { identity, mutate } = useIdentityData(); 36 36 + let smoker = useSmoker(); 37 37 + if ( 38 38 + identity?.permission_token_on_homepage.find( 39 39 + (pth) => pth.permission_tokens.id === permission_token.id, 40 40 + ) || 41 41 + !identity 42 42 + ) 43 43 + return null; 44 44 + return ( 45 45 + <ActionButton 46 46 + onClick={async (e) => { 47 47 + await addLeafletToHome(permission_token.id); 48 48 + mutate((identity) => { 49 49 + if (!identity) return; 50 50 + return produce<typeof identity>((draft) => { 51 51 + draft.permission_token_on_homepage.push({ 52 52 + created_at: new Date().toISOString(), 53 53 + archived: null, 54 54 + permission_tokens: { 55 55 + ...permission_token, 56 56 + leaflets_to_documents: [], 57 57 + leaflets_in_publications: [], 58 58 + }, 59 59 + }); 60 60 + })(identity); 61 61 + }); 62 62 + smoker({ 63 63 + position: { 64 64 + x: e.clientX + 64, 65 65 + y: e.clientY, 66 66 + }, 67 67 + text: "Leaflet added to your home!", 68 68 + }); 69 69 + }} 70 70 + icon={<AddToHomeSmall />} 71 71 + label="Add to Home" 72 72 + /> 73 73 + ); 74 74 + };

+432

app/[leaflet_id]/actions/PublishButton.tsx

··· 1 1 + "use client"; 2 2 + import { publishToPublication } from "actions/publishToPublication"; 3 3 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 4 4 + import { ActionButton } from "components/ActionBar/ActionButton"; 5 5 + import { 6 6 + PubIcon, 7 7 + PubListEmptyContent, 8 8 + PubListEmptyIllo, 9 9 + } from "components/ActionBar/Publications"; 10 10 + import { ButtonPrimary, ButtonTertiary } from "components/Buttons"; 11 11 + import { AddSmall } from "components/Icons/AddSmall"; 12 12 + import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; 13 13 + import { PublishSmall } from "components/Icons/PublishSmall"; 14 14 + import { useIdentityData } from "components/IdentityProvider"; 15 15 + import { InputWithLabel } from "components/Input"; 16 16 + import { Menu, MenuItem } from "components/Layout"; 17 17 + import { 18 18 + useLeafletDomains, 19 19 + useLeafletPublicationData, 20 20 + } from "components/PageSWRDataProvider"; 21 21 + import { Popover } from "components/Popover"; 22 22 + import { SpeedyLink } from "components/SpeedyLink"; 23 23 + import { useToaster } from "components/Toast"; 24 24 + import { DotLoader } from "components/utils/DotLoader"; 25 25 + import { PubLeafletPublication } from "lexicons/api"; 26 26 + import { useParams, useRouter, useSearchParams } from "next/navigation"; 27 27 + import { useState, useMemo } from "react"; 28 28 + import { useIsMobile } from "src/hooks/isMobile"; 29 29 + import { useReplicache, useEntity } from "src/replicache"; 30 30 + import { useSubscribe } from "src/replicache/useSubscribe"; 31 31 + import { Json } from "supabase/database.types"; 32 32 + import { 33 33 + useBlocks, 34 34 + useCanvasBlocksWithType, 35 35 + } from "src/hooks/queries/useBlocks"; 36 36 + import * as Y from "yjs"; 37 37 + import * as base64 from "base64-js"; 38 38 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 39 39 + import { BlueskyLogin } from "app/login/LoginForm"; 40 40 + import { moveLeafletToPublication } from "actions/publications/moveLeafletToPublication"; 41 41 + import { AddTiny } from "components/Icons/AddTiny"; 42 42 + 43 43 + export const PublishButton = (props: { entityID: string }) => { 44 44 + let { data: pub } = useLeafletPublicationData(); 45 45 + let params = useParams(); 46 46 + let router = useRouter(); 47 47 + 48 48 + if (!pub) return <PublishToPublicationButton entityID={props.entityID} />; 49 49 + if (!pub?.doc) 50 50 + return ( 51 51 + <ActionButton 52 52 + primary 53 53 + icon={<PublishSmall className="shrink-0" />} 54 54 + label={"Publish!"} 55 55 + onClick={() => { 56 56 + router.push(`/${params.leaflet_id}/publish`); 57 57 + }} 58 58 + /> 59 59 + ); 60 60 + 61 61 + return <UpdateButton />; 62 62 + }; 63 63 + 64 64 + const UpdateButton = () => { 65 65 + let [isLoading, setIsLoading] = useState(false); 66 66 + let { data: pub, mutate } = useLeafletPublicationData(); 67 67 + let { permission_token, rootEntity, rep } = useReplicache(); 68 68 + let { identity } = useIdentityData(); 69 69 + let toaster = useToaster(); 70 70 + 71 71 + // Get tags from Replicache state (same as draft editor) 72 72 + let tags = useSubscribe(rep, (tx) => tx.get<string[]>("publication_tags")); 73 73 + const currentTags = Array.isArray(tags) ? tags : []; 74 74 + 75 75 + return ( 76 76 + <ActionButton 77 77 + primary 78 78 + icon={<PublishSmall className="shrink-0" />} 79 79 + label={isLoading ? <DotLoader /> : "Update!"} 80 80 + onClick={async () => { 81 81 + if (!pub) return; 82 82 + setIsLoading(true); 83 83 + let doc = await publishToPublication({ 84 84 + root_entity: rootEntity, 85 85 + publication_uri: pub.publications?.uri, 86 86 + leaflet_id: permission_token.id, 87 87 + title: pub.title, 88 88 + description: pub.description, 89 89 + tags: currentTags, 90 90 + }); 91 91 + setIsLoading(false); 92 92 + mutate(); 93 93 + 94 94 + // Generate URL based on whether it's in a publication or standalone 95 95 + let docUrl = pub.publications 96 96 + ? `${getPublicationURL(pub.publications)}/${doc?.rkey}` 97 97 + : `https://leaflet.pub/p/${identity?.atp_did}/${doc?.rkey}`; 98 98 + 99 99 + toaster({ 100 100 + content: ( 101 101 + <div> 102 102 + {pub.doc ? "Updated! " : "Published! "} 103 103 + <SpeedyLink href={docUrl}>link</SpeedyLink> 104 104 + </div> 105 105 + ), 106 106 + type: "success", 107 107 + }); 108 108 + }} 109 109 + /> 110 110 + ); 111 111 + }; 112 112 + 113 113 + const PublishToPublicationButton = (props: { entityID: string }) => { 114 114 + let { identity } = useIdentityData(); 115 115 + let { permission_token } = useReplicache(); 116 116 + let query = useSearchParams(); 117 117 + let [open, setOpen] = useState(query.get("publish") !== null); 118 118 + 119 119 + let isMobile = useIsMobile(); 120 120 + identity && identity.atp_did && identity.publications.length > 0; 121 121 + let [selectedPub, setSelectedPub] = useState<string | undefined>(undefined); 122 122 + let router = useRouter(); 123 123 + let { title, entitiesToDelete } = useTitle(props.entityID); 124 124 + let [description, setDescription] = useState(""); 125 125 + 126 126 + return ( 127 127 + <Popover 128 128 + asChild 129 129 + open={open} 130 130 + onOpenChange={(o) => setOpen(o)} 131 131 + side={isMobile ? "top" : "right"} 132 132 + align={isMobile ? "center" : "start"} 133 133 + className="sm:max-w-sm w-[1000px]" 134 134 + trigger={ 135 135 + <ActionButton 136 136 + primary 137 137 + icon={<PublishSmall className="shrink-0" />} 138 138 + label={"Publish on ATP"} 139 139 + /> 140 140 + } 141 141 + > 142 142 + {!identity || !identity.atp_did ? ( 143 143 + <div className="-mx-2 -my-1"> 144 144 + <div 145 145 + className={`bg-[var(--accent-light)] w-full rounded-md flex flex-col text-center justify-center p-2 pb-4 text-sm`} 146 146 + > 147 147 + <div className="mx-auto pt-2 scale-90"> 148 148 + <PubListEmptyIllo /> 149 149 + </div> 150 150 + <div className="pt-1 font-bold">Publish on AT Proto</div> 151 151 + { 152 152 + <> 153 153 + <div className="pb-2 text-secondary text-xs"> 154 154 + Link a Bluesky account to start <br /> a publishing on AT 155 155 + Proto 156 156 + </div> 157 157 + 158 158 + <BlueskyLogin 159 159 + compact 160 160 + redirectRoute={`/${permission_token.id}?publish`} 161 161 + /> 162 162 + </> 163 163 + } 164 164 + </div> 165 165 + </div> 166 166 + ) : ( 167 167 + <div className="flex flex-col"> 168 168 + <PostDetailsForm 169 169 + title={title} 170 170 + description={description} 171 171 + setDescription={setDescription} 172 172 + /> 173 173 + <hr className="border-border-light my-3" /> 174 174 + <div> 175 175 + <PubSelector 176 176 + publications={identity.publications} 177 177 + selectedPub={selectedPub} 178 178 + setSelectedPub={setSelectedPub} 179 179 + /> 180 180 + </div> 181 181 + <hr className="border-border-light mt-3 mb-2" /> 182 182 + 183 183 + <div className="flex gap-2 items-center place-self-end"> 184 184 + {selectedPub !== "looseleaf" && selectedPub && ( 185 185 + <SaveAsDraftButton 186 186 + selectedPub={selectedPub} 187 187 + leafletId={permission_token.id} 188 188 + metadata={{ title: title, description }} 189 189 + entitiesToDelete={entitiesToDelete} 190 190 + /> 191 191 + )} 192 192 + <ButtonPrimary 193 193 + disabled={selectedPub === undefined} 194 194 + onClick={async (e) => { 195 195 + if (!selectedPub) return; 196 196 + e.preventDefault(); 197 197 + if (selectedPub === "create") return; 198 198 + 199 199 + // For looseleaf, navigate without publication_uri 200 200 + if (selectedPub === "looseleaf") { 201 201 + router.push( 202 202 + `${permission_token.id}/publish?title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}&entitiesToDelete=${encodeURIComponent(JSON.stringify(entitiesToDelete))}`, 203 203 + ); 204 204 + } else { 205 205 + router.push( 206 206 + `${permission_token.id}/publish?publication_uri=${encodeURIComponent(selectedPub)}&title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}&entitiesToDelete=${encodeURIComponent(JSON.stringify(entitiesToDelete))}`, 207 207 + ); 208 208 + } 209 209 + }} 210 210 + > 211 211 + Next{selectedPub === "create" && ": Create Pub!"} 212 212 + </ButtonPrimary> 213 213 + </div> 214 214 + </div> 215 215 + )} 216 216 + </Popover> 217 217 + ); 218 218 + }; 219 219 + 220 220 + const SaveAsDraftButton = (props: { 221 221 + selectedPub: string | undefined; 222 222 + leafletId: string; 223 223 + metadata: { title: string; description: string }; 224 224 + entitiesToDelete: string[]; 225 225 + }) => { 226 226 + let { mutate } = useLeafletPublicationData(); 227 227 + let { rep } = useReplicache(); 228 228 + let [isLoading, setIsLoading] = useState(false); 229 229 + 230 230 + return ( 231 231 + <ButtonTertiary 232 232 + onClick={async (e) => { 233 233 + if (!props.selectedPub) return; 234 234 + if (props.selectedPub === "create") return; 235 235 + e.preventDefault(); 236 236 + setIsLoading(true); 237 237 + await moveLeafletToPublication( 238 238 + props.leafletId, 239 239 + props.selectedPub, 240 240 + props.metadata, 241 241 + props.entitiesToDelete, 242 242 + ); 243 243 + await Promise.all([rep?.pull(), mutate()]); 244 244 + setIsLoading(false); 245 245 + }} 246 246 + > 247 247 + {isLoading ? <DotLoader /> : "Save as Draft"} 248 248 + </ButtonTertiary> 249 249 + ); 250 250 + }; 251 251 + 252 252 + const PostDetailsForm = (props: { 253 253 + title: string; 254 254 + description: string; 255 255 + setDescription: (d: string) => void; 256 256 + }) => { 257 257 + return ( 258 258 + <div className=" flex flex-col gap-1"> 259 259 + <div className="text-sm text-tertiary">Post Details</div> 260 260 + <div className="flex flex-col gap-2"> 261 261 + <InputWithLabel label="Title" value={props.title} disabled /> 262 262 + <InputWithLabel 263 263 + label="Description (optional)" 264 264 + textarea 265 265 + value={props.description} 266 266 + className="h-[4lh]" 267 267 + onChange={(e) => props.setDescription(e.currentTarget.value)} 268 268 + /> 269 269 + </div> 270 270 + </div> 271 271 + ); 272 272 + }; 273 273 + 274 274 + const PubSelector = (props: { 275 275 + selectedPub: string | undefined; 276 276 + setSelectedPub: (s: string) => void; 277 277 + publications: { 278 278 + identity_did: string; 279 279 + indexed_at: string; 280 280 + name: string; 281 281 + record: Json | null; 282 282 + uri: string; 283 283 + }[]; 284 284 + }) => { 285 285 + // HEY STILL TO DO 286 286 + // test out logged out, logged in but no pubs, and pubbed up flows 287 287 + 288 288 + return ( 289 289 + <div className="flex flex-col gap-1"> 290 290 + <div className="text-sm text-tertiary">Publish to…</div> 291 291 + {props.publications.length === 0 || props.publications === undefined ? ( 292 292 + <div className="flex flex-col gap-1"> 293 293 + <div className="flex gap-2 menuItem"> 294 294 + <LooseLeafSmall className="shrink-0" /> 295 295 + <div className="flex flex-col leading-snug"> 296 296 + <div className="text-secondary font-bold"> 297 297 + Publish as Looseleaf 298 298 + </div> 299 299 + <div className="text-tertiary text-sm font-normal"> 300 300 + Publish this as a one off doc to AT Proto 301 301 + </div> 302 302 + </div> 303 303 + </div> 304 304 + <div className="flex gap-2 px-2 py-1 "> 305 305 + <PublishSmall className="shrink-0 text-border" /> 306 306 + <div className="flex flex-col leading-snug"> 307 307 + <div className="text-border font-bold"> 308 308 + Publish to Publication 309 309 + </div> 310 310 + <div className="text-border text-sm font-normal"> 311 311 + Publish your writing to a blog on AT Proto 312 312 + </div> 313 313 + <hr className="my-2 drashed border-border-light border-dashed" /> 314 314 + <div className="text-tertiary text-sm font-normal "> 315 315 + You don't have any Publications yet.{" "} 316 316 + <a target="_blank" href="/lish/createPub"> 317 317 + Create one 318 318 + </a>{" "} 319 319 + to get started! 320 320 + </div> 321 321 + </div> 322 322 + </div> 323 323 + </div> 324 324 + ) : ( 325 325 + <div className="flex flex-col gap-1"> 326 326 + <PubOption 327 327 + selected={props.selectedPub === "looseleaf"} 328 328 + onSelect={() => props.setSelectedPub("looseleaf")} 329 329 + > 330 330 + <LooseLeafSmall /> 331 331 + Publish as Looseleaf 332 332 + </PubOption> 333 333 + <hr className="border-border-light border-dashed " /> 334 334 + {props.publications.map((p) => { 335 335 + let pubRecord = p.record as PubLeafletPublication.Record; 336 336 + return ( 337 337 + <PubOption 338 338 + key={p.uri} 339 339 + selected={props.selectedPub === p.uri} 340 340 + onSelect={() => props.setSelectedPub(p.uri)} 341 341 + > 342 342 + <> 343 343 + <PubIcon record={pubRecord} uri={p.uri} /> 344 344 + {p.name} 345 345 + </> 346 346 + </PubOption> 347 347 + ); 348 348 + })} 349 349 + <div className="flex items-center px-2 py-1 text-accent-contrast gap-2"> 350 350 + <AddTiny className="m-1 shrink-0" /> 351 351 + 352 352 + <a target="_blank" href="/lish/createPub"> 353 353 + Start a new Publication 354 354 + </a> 355 355 + </div> 356 356 + </div> 357 357 + )} 358 358 + </div> 359 359 + ); 360 360 + }; 361 361 + 362 362 + const PubOption = (props: { 363 363 + selected: boolean; 364 364 + onSelect: () => void; 365 365 + children: React.ReactNode; 366 366 + }) => { 367 367 + return ( 368 368 + <button 369 369 + className={`flex gap-2 menuItem font-bold text-secondary ${props.selected && "bg-[var(--accent-light)]! outline! outline-offset-1! outline-accent-contrast!"}`} 370 370 + onClick={() => { 371 371 + props.onSelect(); 372 372 + }} 373 373 + > 374 374 + {props.children} 375 375 + </button> 376 376 + ); 377 377 + }; 378 378 + 379 379 + let useTitle = (entityID: string) => { 380 380 + let rootPage = useEntity(entityID, "root/page")[0].data.value; 381 381 + let canvasBlocks = useCanvasBlocksWithType(rootPage).filter( 382 382 + (b) => b.type === "text" || b.type === "heading", 383 383 + ); 384 384 + let blocks = useBlocks(rootPage).filter( 385 385 + (b) => b.type === "text" || b.type === "heading", 386 386 + ); 387 387 + let firstBlock = canvasBlocks[0] || blocks[0]; 388 388 + 389 389 + let firstBlockText = useEntity(firstBlock?.value, "block/text")?.data.value; 390 390 + 391 391 + const leafletTitle = useMemo(() => { 392 392 + if (!firstBlockText) return "Untitled"; 393 393 + let doc = new Y.Doc(); 394 394 + const update = base64.toByteArray(firstBlockText); 395 395 + Y.applyUpdate(doc, update); 396 396 + let nodes = doc.getXmlElement("prosemirror").toArray(); 397 397 + return YJSFragmentToString(nodes[0]) || "Untitled"; 398 398 + }, [firstBlockText]); 399 399 + 400 400 + // Only handle second block logic for linear documents, not canvas 401 401 + let isCanvas = canvasBlocks.length > 0; 402 402 + let secondBlock = !isCanvas ? blocks[1] : undefined; 403 403 + let secondBlockTextValue = useEntity(secondBlock?.value || null, "block/text") 404 404 + ?.data.value; 405 405 + const secondBlockText = useMemo(() => { 406 406 + if (!secondBlockTextValue) return ""; 407 407 + let doc = new Y.Doc(); 408 408 + const update = base64.toByteArray(secondBlockTextValue); 409 409 + Y.applyUpdate(doc, update); 410 410 + let nodes = doc.getXmlElement("prosemirror").toArray(); 411 411 + return YJSFragmentToString(nodes[0]) || ""; 412 412 + }, [secondBlockTextValue]); 413 413 + 414 414 + let entitiesToDelete = useMemo(() => { 415 415 + let etod: string[] = []; 416 416 + // Only delete first block if it's a heading type 417 417 + if (firstBlock?.type === "heading") { 418 418 + etod.push(firstBlock.value); 419 419 + } 420 420 + // Delete second block if it's empty text (only for linear documents) 421 421 + if ( 422 422 + !isCanvas && 423 423 + secondBlockText.trim() === "" && 424 424 + secondBlock?.type === "text" 425 425 + ) { 426 426 + etod.push(secondBlock.value); 427 427 + } 428 428 + return etod; 429 429 + }, [firstBlock, secondBlockText, secondBlock, isCanvas]); 430 430 + 431 431 + return { title: leafletTitle, entitiesToDelete }; 432 432 + };

+394

app/[leaflet_id]/actions/ShareOptions/DomainOptions.tsx

··· 1 1 + import { useState } from "react"; 2 2 + import { ButtonPrimary } from "components/Buttons"; 3 3 + 4 4 + import { useSmoker, useToaster } from "components/Toast"; 5 5 + import { Input, InputWithLabel } from "components/Input"; 6 6 + import useSWR from "swr"; 7 7 + import { useIdentityData } from "components/IdentityProvider"; 8 8 + import { addDomain } from "actions/domains/addDomain"; 9 9 + import { callRPC } from "app/api/rpc/client"; 10 10 + import { useLeafletDomains } from "components/PageSWRDataProvider"; 11 11 + import { useReadOnlyShareLink } from "."; 12 12 + import { addDomainPath } from "actions/domains/addDomainPath"; 13 13 + import { useReplicache } from "src/replicache"; 14 14 + import { deleteDomain } from "actions/domains/deleteDomain"; 15 15 + import { AddTiny } from "components/Icons/AddTiny"; 16 16 + 17 17 + type DomainMenuState = 18 18 + | { 19 19 + state: "default"; 20 20 + } 21 21 + | { 22 22 + state: "domain-settings"; 23 23 + domain: string; 24 24 + } 25 25 + | { 26 26 + state: "add-domain"; 27 27 + } 28 28 + | { 29 29 + state: "has-domain"; 30 30 + domain: string; 31 31 + }; 32 32 + export function CustomDomainMenu(props: { 33 33 + setShareMenuState: (s: "default") => void; 34 34 + }) { 35 35 + let { data: domains } = useLeafletDomains(); 36 36 + let [state, setState] = useState<DomainMenuState>( 37 37 + domains?.[0] 38 38 + ? { state: "has-domain", domain: domains[0].domain } 39 39 + : { state: "default" }, 40 40 + ); 41 41 + switch (state.state) { 42 42 + case "has-domain": 43 43 + case "default": 44 44 + return ( 45 45 + <DomainOptions 46 46 + setDomainMenuState={setState} 47 47 + domainConnected={false} 48 48 + setShareMenuState={props.setShareMenuState} 49 49 + /> 50 50 + ); 51 51 + case "domain-settings": 52 52 + return ( 53 53 + <DomainSettings domain={state.domain} setDomainMenuState={setState} /> 54 54 + ); 55 55 + case "add-domain": 56 56 + return <AddDomain setDomainMenuState={setState} />; 57 57 + } 58 58 + } 59 59 + 60 60 + export const DomainOptions = (props: { 61 61 + setShareMenuState: (s: "default") => void; 62 62 + setDomainMenuState: (state: DomainMenuState) => void; 63 63 + domainConnected: boolean; 64 64 + }) => { 65 65 + let { data: domains, mutate: mutateDomains } = useLeafletDomains(); 66 66 + let [selectedDomain, setSelectedDomain] = useState<string | undefined>( 67 67 + domains?.[0]?.domain, 68 68 + ); 69 69 + let [selectedRoute, setSelectedRoute] = useState( 70 70 + domains?.[0]?.route.slice(1) || "", 71 71 + ); 72 72 + let { identity } = useIdentityData(); 73 73 + let { permission_token } = useReplicache(); 74 74 + 75 75 + let toaster = useToaster(); 76 76 + let smoker = useSmoker(); 77 77 + let publishLink = useReadOnlyShareLink(); 78 78 + 79 79 + return ( 80 80 + <div className="px-3 py-1 flex flex-col gap-3 max-w-full w-[600px]"> 81 81 + <h3 className="text-secondary">Choose a Domain</h3> 82 82 + <div className="flex flex-col gap-1 text-secondary"> 83 83 + {identity?.custom_domains 84 84 + .filter((d) => !d.publication_domains.length) 85 85 + .map((domain) => { 86 86 + return ( 87 87 + <DomainOption 88 88 + selectedRoute={selectedRoute} 89 89 + setSelectedRoute={setSelectedRoute} 90 90 + key={domain.domain} 91 91 + domain={domain.domain} 92 92 + checked={selectedDomain === domain.domain} 93 93 + setChecked={setSelectedDomain} 94 94 + setDomainMenuState={props.setDomainMenuState} 95 95 + /> 96 96 + ); 97 97 + })} 98 98 + <button 99 99 + onMouseDown={() => { 100 100 + props.setDomainMenuState({ state: "add-domain" }); 101 101 + }} 102 102 + className="text-accent-contrast flex gap-2 items-center px-1 py-0.5" 103 103 + > 104 104 + <AddTiny /> Add a New Domain 105 105 + </button> 106 106 + </div> 107 107 + 108 108 + {/* ONLY SHOW IF A DOMAIN IS CURRENTLY CONNECTED */} 109 109 + <div className="flex gap-3 items-center justify-end"> 110 110 + {props.domainConnected && ( 111 111 + <button 112 112 + onMouseDown={() => { 113 113 + props.setShareMenuState("default"); 114 114 + toaster({ 115 115 + content: ( 116 116 + <div className="font-bold"> 117 117 + Unpublished from custom domain! 118 118 + </div> 119 119 + ), 120 120 + type: "error", 121 121 + }); 122 122 + }} 123 123 + > 124 124 + Unpublish 125 125 + </button> 126 126 + )} 127 127 + 128 128 + <ButtonPrimary 129 129 + id="publish-to-domain" 130 130 + disabled={ 131 131 + domains?.[0] 132 132 + ? domains[0].domain === selectedDomain && 133 133 + domains[0].route.slice(1) === selectedRoute 134 134 + : !selectedDomain 135 135 + } 136 136 + onClick={async () => { 137 137 + // let rect = document 138 138 + // .getElementById("publish-to-domain") 139 139 + // ?.getBoundingClientRect(); 140 140 + // smoker({ 141 141 + // error: true, 142 142 + // text: "url already in use!", 143 143 + // position: { 144 144 + // x: rect ? rect.left : 0, 145 145 + // y: rect ? rect.top + 26 : 0, 146 146 + // }, 147 147 + // }); 148 148 + if (!selectedDomain || !publishLink) return; 149 149 + await addDomainPath({ 150 150 + domain: selectedDomain, 151 151 + route: "/" + selectedRoute, 152 152 + view_permission_token: publishLink, 153 153 + edit_permission_token: permission_token.id, 154 154 + }); 155 155 + 156 156 + toaster({ 157 157 + content: ( 158 158 + <div className="font-bold"> 159 159 + Published to custom domain!{" "} 160 160 + <a 161 161 + className="underline text-accent-2" 162 162 + href={`https://${selectedDomain}/${selectedRoute}`} 163 163 + target="_blank" 164 164 + > 165 165 + View 166 166 + </a> 167 167 + </div> 168 168 + ), 169 169 + type: "success", 170 170 + }); 171 171 + mutateDomains(); 172 172 + props.setShareMenuState("default"); 173 173 + }} 174 174 + > 175 175 + Publish! 176 176 + </ButtonPrimary> 177 177 + </div> 178 178 + </div> 179 179 + ); 180 180 + }; 181 181 + 182 182 + const DomainOption = (props: { 183 183 + selectedRoute: string; 184 184 + setSelectedRoute: (s: string) => void; 185 185 + checked: boolean; 186 186 + setChecked: (checked: string) => void; 187 187 + domain: string; 188 188 + setDomainMenuState: (state: DomainMenuState) => void; 189 189 + }) => { 190 190 + let [value, setValue] = useState(""); 191 191 + let { data } = useSWR(props.domain, async (domain) => { 192 192 + return await callRPC("get_domain_status", { domain }); 193 193 + }); 194 194 + let pending = data?.config?.misconfigured || data?.error; 195 195 + return ( 196 196 + <label htmlFor={props.domain}> 197 197 + <input 198 198 + type="radio" 199 199 + name={props.domain} 200 200 + id={props.domain} 201 201 + value={props.domain} 202 202 + checked={props.checked} 203 203 + className="hidden appearance-none" 204 204 + onChange={() => { 205 205 + if (pending) return; 206 206 + props.setChecked(props.domain); 207 207 + }} 208 208 + /> 209 209 + <div 210 210 + className={` 211 211 + px-[6px] py-1 212 212 + flex 213 213 + border rounded-md 214 214 + ${ 215 215 + pending 216 216 + ? "border-border-light text-secondary justify-between gap-2 items-center " 217 217 + : !props.checked 218 218 + ? "flex-wrap border-border-light" 219 219 + : "flex-wrap border-accent-1 bg-accent-1 text-accent-2 font-bold" 220 220 + } `} 221 221 + > 222 222 + <div className={`w-max truncate ${pending && "animate-pulse"}`}> 223 223 + {props.domain} 224 224 + </div> 225 225 + {props.checked && ( 226 226 + <div className="flex gap-0 w-full"> 227 227 + <span 228 228 + className="font-normal" 229 229 + style={value === "" ? { opacity: "0.5" } : {}} 230 230 + > 231 231 + / 232 232 + </span> 233 233 + 234 234 + <Input 235 235 + type="text" 236 236 + autoFocus 237 237 + className="appearance-none focus:outline-hidden font-normal text-accent-2 w-full bg-transparent placeholder:text-accent-2 placeholder:opacity-50" 238 238 + placeholder="add-optional-path" 239 239 + onChange={(e) => props.setSelectedRoute(e.target.value)} 240 240 + value={props.selectedRoute} 241 241 + /> 242 242 + </div> 243 243 + )} 244 244 + {pending && ( 245 245 + <button 246 246 + className="text-accent-contrast text-sm" 247 247 + onMouseDown={() => { 248 248 + props.setDomainMenuState({ 249 249 + state: "domain-settings", 250 250 + domain: props.domain, 251 251 + }); 252 252 + }} 253 253 + > 254 254 + pending 255 255 + </button> 256 256 + )} 257 257 + </div> 258 258 + </label> 259 259 + ); 260 260 + }; 261 261 + 262 262 + export const AddDomain = (props: { 263 263 + setDomainMenuState: (state: DomainMenuState) => void; 264 264 + }) => { 265 265 + let [value, setValue] = useState(""); 266 266 + let { mutate } = useIdentityData(); 267 267 + let smoker = useSmoker(); 268 268 + return ( 269 269 + <div className="flex flex-col gap-1 px-3 py-1 max-w-full w-[600px]"> 270 270 + <div> 271 271 + <h3 className="text-secondary">Add a New Domain</h3> 272 272 + <div className="text-xs italic text-secondary"> 273 273 + Don't include the protocol or path, just the base domain name for now 274 274 + </div> 275 275 + </div> 276 276 + 277 277 + <Input 278 278 + className="input-with-border text-primary" 279 279 + placeholder="www.example.com" 280 280 + value={value} 281 281 + onChange={(e) => setValue(e.target.value)} 282 282 + /> 283 283 + 284 284 + <ButtonPrimary 285 285 + disabled={!value} 286 286 + className="place-self-end mt-2" 287 287 + onMouseDown={async (e) => { 288 288 + // call the vercel api, set the thing... 289 289 + let { error } = await addDomain(value); 290 290 + if (error) { 291 291 + smoker({ 292 292 + error: true, 293 293 + text: 294 294 + error === "invalid_domain" 295 295 + ? "Invalid domain! Use just the base domain" 296 296 + : error === "domain_already_in_use" 297 297 + ? "That domain is already in use!" 298 298 + : "An unknown error occured", 299 299 + position: { 300 300 + y: e.clientY, 301 301 + x: e.clientX - 5, 302 302 + }, 303 303 + }); 304 304 + return; 305 305 + } 306 306 + mutate(); 307 307 + props.setDomainMenuState({ state: "domain-settings", domain: value }); 308 308 + }} 309 309 + > 310 310 + Verify Domain 311 311 + </ButtonPrimary> 312 312 + </div> 313 313 + ); 314 314 + }; 315 315 + 316 316 + const DomainSettings = (props: { 317 317 + domain: string; 318 318 + setDomainMenuState: (s: DomainMenuState) => void; 319 319 + }) => { 320 320 + let isSubdomain = props.domain.split(".").length > 2; 321 321 + return ( 322 322 + <div className="flex flex-col gap-1 px-3 py-1 max-w-full w-[600px]"> 323 323 + <h3 className="text-secondary">Verify Domain</h3> 324 324 + 325 325 + <div className="text-secondary text-sm flex flex-col gap-3"> 326 326 + <div className="flex flex-col gap-[6px]"> 327 327 + <div> 328 328 + To verify this domain, add the following record to your DNS provider 329 329 + for <strong>{props.domain}</strong>. 330 330 + </div> 331 331 + 332 332 + {isSubdomain ? ( 333 333 + <div className="flex gap-3 p-1 border border-border-light rounded-md py-1"> 334 334 + <div className="flex flex-col "> 335 335 + <div className="text-tertiary">Type</div> 336 336 + <div>CNAME</div> 337 337 + </div> 338 338 + <div className="flex flex-col"> 339 339 + <div className="text-tertiary">Name</div> 340 340 + <div style={{ wordBreak: "break-word" }}> 341 341 + {props.domain.split(".").slice(0, -2).join(".")} 342 342 + </div> 343 343 + </div> 344 344 + <div className="flex flex-col"> 345 345 + <div className="text-tertiary">Value</div> 346 346 + <div style={{ wordBreak: "break-word" }}> 347 347 + cname.vercel-dns.com 348 348 + </div> 349 349 + </div> 350 350 + </div> 351 351 + ) : ( 352 352 + <div className="flex gap-3 p-1 border border-border-light rounded-md py-1"> 353 353 + <div className="flex flex-col "> 354 354 + <div className="text-tertiary">Type</div> 355 355 + <div>A</div> 356 356 + </div> 357 357 + <div className="flex flex-col"> 358 358 + <div className="text-tertiary">Name</div> 359 359 + <div>@</div> 360 360 + </div> 361 361 + <div className="flex flex-col"> 362 362 + <div className="text-tertiary">Value</div> 363 363 + <div>76.76.21.21</div> 364 364 + </div> 365 365 + </div> 366 366 + )} 367 367 + </div> 368 368 + <div> 369 369 + Once you do this, the status may be pending for up to a few hours. 370 370 + </div> 371 371 + <div>Check back later to see if verification was successful.</div> 372 372 + </div> 373 373 + 374 374 + <div className="flex gap-3 justify-between items-center mt-2"> 375 375 + <button 376 376 + className="text-accent-contrast font-bold " 377 377 + onMouseDown={async () => { 378 378 + await deleteDomain({ domain: props.domain }); 379 379 + props.setDomainMenuState({ state: "default" }); 380 380 + }} 381 381 + > 382 382 + Delete Domain 383 383 + </button> 384 384 + <ButtonPrimary 385 385 + onMouseDown={() => { 386 386 + props.setDomainMenuState({ state: "default" }); 387 387 + }} 388 388 + > 389 389 + Back to Domains 390 390 + </ButtonPrimary> 391 391 + </div> 392 392 + </div> 393 393 + ); 394 394 + };

+70

app/[leaflet_id]/actions/ShareOptions/getShareLink.ts

··· 1 1 + "use server"; 2 2 + 3 3 + import { eq, and } from "drizzle-orm"; 4 4 + import { drizzle } from "drizzle-orm/node-postgres"; 5 5 + import { permission_token_rights, permission_tokens } from "drizzle/schema"; 6 6 + import { pool } from "supabase/pool"; 7 7 + export async function getShareLink( 8 8 + token: { id: string; entity_set: string }, 9 9 + rootEntity: string, 10 10 + ) { 11 11 + const client = await pool.connect(); 12 12 + const db = drizzle(client); 13 13 + let link = await db.transaction(async (tx) => { 14 14 + // This will likely error out when if we have multiple permission 15 15 + // token rights associated with a single token 16 16 + let [tokenW] = await tx 17 17 + .select() 18 18 + .from(permission_tokens) 19 19 + .leftJoin( 20 20 + permission_token_rights, 21 21 + eq(permission_token_rights.token, permission_tokens.id), 22 22 + ) 23 23 + .where(eq(permission_tokens.id, token.id)); 24 24 + if ( 25 25 + !tokenW.permission_token_rights || 26 26 + tokenW.permission_token_rights.create_token !== true || 27 27 + tokenW.permission_tokens.root_entity !== rootEntity || 28 28 + tokenW.permission_token_rights.entity_set !== token.entity_set 29 29 + ) { 30 30 + return null; 31 31 + } 32 32 + 33 33 + let [existingToken] = await tx 34 34 + .select() 35 35 + .from(permission_tokens) 36 36 + .rightJoin( 37 37 + permission_token_rights, 38 38 + eq(permission_token_rights.token, permission_tokens.id), 39 39 + ) 40 40 + .where( 41 41 + and( 42 42 + eq(permission_token_rights.read, true), 43 43 + eq(permission_token_rights.write, false), 44 44 + eq(permission_token_rights.create_token, false), 45 45 + eq(permission_token_rights.change_entity_set, false), 46 46 + eq(permission_token_rights.entity_set, token.entity_set), 47 47 + eq(permission_tokens.root_entity, rootEntity), 48 48 + ), 49 49 + ); 50 50 + if (existingToken) { 51 51 + return existingToken.permission_tokens; 52 52 + } 53 53 + let [newToken] = await tx 54 54 + .insert(permission_tokens) 55 55 + .values({ root_entity: rootEntity }) 56 56 + .returning(); 57 57 + await tx.insert(permission_token_rights).values({ 58 58 + entity_set: token.entity_set, 59 59 + token: newToken.id, 60 60 + read: true, 61 61 + write: false, 62 62 + create_token: false, 63 63 + change_entity_set: false, 64 64 + }); 65 65 + return newToken; 66 66 + }); 67 67 + 68 68 + client.release(); 69 69 + return link; 70 70 + }

+257

app/[leaflet_id]/actions/ShareOptions/index.tsx

··· 1 1 + import { useReplicache } from "src/replicache"; 2 2 + import React, { useEffect, useState } from "react"; 3 3 + import { getShareLink } from "./getShareLink"; 4 4 + import { useEntitySetContext } from "components/EntitySetProvider"; 5 5 + import { useSmoker } from "components/Toast"; 6 6 + import { Menu, MenuItem } from "components/Layout"; 7 7 + import { ActionButton } from "components/ActionBar/ActionButton"; 8 8 + import useSWR from "swr"; 9 9 + import LoginForm from "app/login/LoginForm"; 10 10 + import { CustomDomainMenu } from "./DomainOptions"; 11 11 + import { useIdentityData } from "components/IdentityProvider"; 12 12 + import { 13 13 + useLeafletDomains, 14 14 + useLeafletPublicationData, 15 15 + } from "components/PageSWRDataProvider"; 16 16 + import { ShareSmall } from "components/Icons/ShareSmall"; 17 17 + import { PubLeafletDocument } from "lexicons/api"; 18 18 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 19 19 + import { AtUri } from "@atproto/syntax"; 20 20 + import { useIsMobile } from "src/hooks/isMobile"; 21 21 + 22 22 + export type ShareMenuStates = "default" | "login" | "domain"; 23 23 + 24 24 + export let useReadOnlyShareLink = () => { 25 25 + let { permission_token, rootEntity } = useReplicache(); 26 26 + let entity_set = useEntitySetContext(); 27 27 + let { data: publishLink } = useSWR( 28 28 + "publishLink-" + permission_token.id, 29 29 + async () => { 30 30 + if ( 31 31 + !permission_token.permission_token_rights.find( 32 32 + (s) => s.entity_set === entity_set.set && s.create_token, 33 33 + ) 34 34 + ) 35 35 + return; 36 36 + let shareLink = await getShareLink( 37 37 + { id: permission_token.id, entity_set: entity_set.set }, 38 38 + rootEntity, 39 39 + ); 40 40 + return shareLink?.id; 41 41 + }, 42 42 + ); 43 43 + return publishLink; 44 44 + }; 45 45 + 46 46 + export function ShareOptions() { 47 47 + let [menuState, setMenuState] = useState<ShareMenuStates>("default"); 48 48 + let { data: pub } = useLeafletPublicationData(); 49 49 + let isMobile = useIsMobile(); 50 50 + 51 51 + return ( 52 52 + <Menu 53 53 + asChild 54 54 + side={isMobile ? "top" : "right"} 55 55 + align={isMobile ? "center" : "start"} 56 56 + className="max-w-xs" 57 57 + onOpenChange={() => { 58 58 + setMenuState("default"); 59 59 + }} 60 60 + trigger={ 61 61 + <ActionButton 62 62 + icon=<ShareSmall /> 63 63 + secondary 64 64 + label={`Share ${pub ? "Draft" : ""}`} 65 65 + /> 66 66 + } 67 67 + > 68 68 + {menuState === "login" ? ( 69 69 + <div className="px-3 py-1"> 70 70 + <LoginForm text="Save your Leaflets and access them on multiple devices!" /> 71 71 + </div> 72 72 + ) : menuState === "domain" ? ( 73 73 + <CustomDomainMenu setShareMenuState={setMenuState} /> 74 74 + ) : ( 75 75 + <ShareMenu 76 76 + setMenuState={setMenuState} 77 77 + domainConnected={false} 78 78 + isPub={!!pub} 79 79 + /> 80 80 + )} 81 81 + </Menu> 82 82 + ); 83 83 + } 84 84 + 85 85 + const ShareMenu = (props: { 86 86 + setMenuState: (state: ShareMenuStates) => void; 87 87 + domainConnected: boolean; 88 88 + isPub?: boolean; 89 89 + }) => { 90 90 + let { permission_token } = useReplicache(); 91 91 + let { data: pub } = useLeafletPublicationData(); 92 92 + 93 93 + let record = pub?.documents?.data as PubLeafletDocument.Record | null; 94 94 + 95 95 + let docURI = pub?.documents ? new AtUri(pub?.documents.uri) : null; 96 96 + let postLink = !docURI 97 97 + ? null 98 98 + : pub?.publications 99 99 + ? `${getPublicationURL(pub.publications)}/${docURI.rkey}` 100 100 + : `p/${docURI.host}/${docURI.rkey}`; 101 101 + let publishLink = useReadOnlyShareLink(); 102 102 + let [collabLink, setCollabLink] = useState<null | string>(null); 103 103 + useEffect(() => { 104 104 + // strip leading '/' character from pathname 105 105 + setCollabLink(window.location.pathname.slice(1)); 106 106 + }, []); 107 107 + let { data: domains } = useLeafletDomains(); 108 108 + 109 109 + return ( 110 110 + <> 111 111 + <ShareButton 112 112 + text={`Share ${postLink ? "Draft" : ""} Edit Link`} 113 113 + subtext="" 114 114 + smokerText="Edit link copied!" 115 115 + id="get-edit-link" 116 116 + link={collabLink} 117 117 + /> 118 118 + <ShareButton 119 119 + text={`Share ${postLink ? "Draft" : ""} View Link`} 120 120 + subtext=<> 121 121 + {domains?.[0] ? ( 122 122 + <> 123 123 + This Leaflet is published on{" "} 124 124 + <span className="italic underline"> 125 125 + {domains[0].domain} 126 126 + {domains[0].route} 127 127 + </span> 128 128 + </> 129 129 + ) : ( 130 130 + "" 131 131 + )} 132 132 + </> 133 133 + smokerText="View link copied!" 134 134 + id="get-view-link" 135 135 + fullLink={ 136 136 + domains?.[0] 137 137 + ? `https://${domains[0].domain}${domains[0].route}` 138 138 + : undefined 139 139 + } 140 140 + link={publishLink || ""} 141 141 + /> 142 142 + {postLink && ( 143 143 + <> 144 144 + <hr className="border-border-light" /> 145 145 + 146 146 + <ShareButton 147 147 + text="Share Published Link" 148 148 + subtext="" 149 149 + smokerText="Post link copied!" 150 150 + id="get-post-link" 151 151 + fullLink={postLink.includes("http") ? postLink : undefined} 152 152 + link={postLink} 153 153 + /> 154 154 + </> 155 155 + )} 156 156 + {!props.isPub && ( 157 157 + <> 158 158 + <hr className="border-border mt-1" /> 159 159 + <DomainMenuItem setMenuState={props.setMenuState} /> 160 160 + </> 161 161 + )} 162 162 + </> 163 163 + ); 164 164 + }; 165 165 + 166 166 + export const ShareButton = (props: { 167 167 + text: React.ReactNode; 168 168 + subtext?: React.ReactNode; 169 169 + smokerText: string; 170 170 + id: string; 171 171 + link: null | string; 172 172 + fullLink?: string; 173 173 + className?: string; 174 174 + }) => { 175 175 + let smoker = useSmoker(); 176 176 + 177 177 + return ( 178 178 + <MenuItem 179 179 + id={props.id} 180 180 + onSelect={(e) => { 181 181 + e.preventDefault(); 182 182 + let rect = document.getElementById(props.id)?.getBoundingClientRect(); 183 183 + if (props.link || props.fullLink) { 184 184 + navigator.clipboard.writeText( 185 185 + props.fullLink 186 186 + ? props.fullLink 187 187 + : `${location.protocol}//${location.host}/${props.link}`, 188 188 + ); 189 189 + smoker({ 190 190 + position: { 191 191 + x: rect ? rect.left + (rect.right - rect.left) / 2 : 0, 192 192 + y: rect ? rect.top + 26 : 0, 193 193 + }, 194 194 + text: props.smokerText, 195 195 + }); 196 196 + } 197 197 + }} 198 198 + > 199 199 + <div className={`group/${props.id} ${props.className} leading-snug`}> 200 200 + {props.text} 201 201 + 202 202 + {props.subtext && ( 203 203 + <div className={`text-sm font-normal text-tertiary`}> 204 204 + {props.subtext} 205 205 + </div> 206 206 + )} 207 207 + </div> 208 208 + </MenuItem> 209 209 + ); 210 210 + }; 211 211 + 212 212 + const DomainMenuItem = (props: { 213 213 + setMenuState: (state: ShareMenuStates) => void; 214 214 + }) => { 215 215 + let { identity } = useIdentityData(); 216 216 + let { data: domains } = useLeafletDomains(); 217 217 + 218 218 + if (identity === null) 219 219 + return ( 220 220 + <div className="text-tertiary font-normal text-sm px-3 py-1"> 221 221 + <button 222 222 + className="text-accent-contrast hover:font-bold" 223 223 + onClick={() => { 224 224 + props.setMenuState("login"); 225 225 + }} 226 226 + > 227 227 + Log In 228 228 + </button>{" "} 229 229 + to publish on a custom domain! 230 230 + </div> 231 231 + ); 232 232 + else 233 233 + return ( 234 234 + <> 235 235 + {domains?.[0] ? ( 236 236 + <button 237 237 + className="px-3 py-1 text-accent-contrast text-sm hover:font-bold w-fit text-left" 238 238 + onMouseDown={() => { 239 239 + props.setMenuState("domain"); 240 240 + }} 241 241 + > 242 242 + Edit custom domain 243 243 + </button> 244 244 + ) : ( 245 245 + <MenuItem 246 246 + className="font-normal text-tertiary text-sm" 247 247 + onSelect={(e) => { 248 248 + e.preventDefault(); 249 249 + props.setMenuState("domain"); 250 250 + }} 251 251 + > 252 252 + Publish on a custom domain 253 253 + </MenuItem> 254 254 + )} 255 255 + </> 256 256 + ); 257 257 + };

+4 -2

app/[leaflet_id]/icon.tsx

··· 24 24 process.env.SUPABASE_SERVICE_ROLE_KEY as string, 25 25 { cookies: {} }, 26 26 ); 27 27 - export default async function Icon(props: { params: { leaflet_id: string } }) { 27 27 + export default async function Icon(props: { 28 28 + params: Promise<{ leaflet_id: string }>; 29 29 + }) { 28 30 let res = await supabase 29 31 .from("permission_tokens") 30 32 .select("*, permission_token_rights(*)") 31 31 - .eq("id", props.params.leaflet_id) 33 33 + .eq("id", (await props.params).leaflet_id) 32 34 .single(); 33 35 let rootEntity = res.data?.root_entity; 34 36 let outlineColor, fillColor;

+3 -2

app/[leaflet_id]/opengraph-image.tsx

··· 4 4 export const revalidate = 60; 5 5 6 6 export default async function OpenGraphImage(props: { 7 7 - params: { leaflet_id: string }; 7 7 + params: Promise<{ leaflet_id: string }>; 8 8 }) { 9 9 - return getMicroLinkOgImage(`/${props.params.leaflet_id}`); 9 9 + let params = await props.params; 10 10 + return getMicroLinkOgImage(`/${params.leaflet_id}`); 10 11 }

+3 -6

app/[leaflet_id]/page.tsx

··· 4 4 5 5 import type { Fact } from "src/replicache"; 6 6 import type { Attribute } from "src/replicache/attributes"; 7 7 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 7 7 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 8 8 import { Leaflet } from "./Leaflet"; 9 9 import { scanIndexLocal } from "src/replicache/utils"; 10 10 import { getRSVPData } from "actions/getRSVPData"; ··· 13 13 import { supabaseServerClient } from "supabase/serverClient"; 14 14 import { get_leaflet_data } from "app/api/rpc/[command]/get_leaflet_data"; 15 15 import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout"; 16 16 + import { getPublicationMetadataFromLeafletData } from "src/utils/getPublicationMetadataFromLeafletData"; 16 17 17 18 export const preferredRegion = ["sfo1"]; 18 19 export const dynamic = "force-dynamic"; ··· 70 71 ); 71 72 let rootEntity = res.data?.root_entity; 72 73 if (!rootEntity || !res.data) return { title: "Leaflet not found" }; 73 73 - let publication_data = 74 74 - res.data?.leaflets_in_publications?.[0] || 75 75 - res.data?.permission_token_rights[0].entity_sets?.permission_tokens?.find( 76 76 - (p) => p.leaflets_in_publications.length, 77 77 - )?.leaflets_in_publications?.[0]; 74 74 + let publication_data = getPublicationMetadataFromLeafletData(res.data); 78 75 if (publication_data) { 79 76 return { 80 77 title: publication_data.title || "Untitled",

+147 -295

app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx

··· 1 1 "use client"; 2 2 - import { Agent, AppBskyRichtextFacet, UnicodeString } from "@atproto/api"; 3 3 - import { 4 4 - useState, 5 5 - useCallback, 6 6 - useRef, 7 7 - useLayoutEffect, 8 8 - useEffect, 9 9 - } from "react"; 10 10 - import { createPortal } from "react-dom"; 11 11 - import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 12 12 - import * as Popover from "@radix-ui/react-popover"; 13 13 - import { EditorState, TextSelection, Plugin } from "prosemirror-state"; 2 2 + import { AppBskyRichtextFacet, UnicodeString } from "@atproto/api"; 3 3 + import { useState, useCallback, useRef, useLayoutEffect } from "react"; 4 4 + import { EditorState } from "prosemirror-state"; 14 5 import { EditorView } from "prosemirror-view"; 15 6 import { Schema, MarkSpec, Mark } from "prosemirror-model"; 16 7 import { baseKeymap } from "prosemirror-commands"; ··· 19 10 import { inputRules, InputRule } from "prosemirror-inputrules"; 20 11 import { autolink } from "components/Blocks/TextBlock/autolink-plugin"; 21 12 import { IOSBS } from "app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox"; 13 13 + import { schema } from "components/Blocks/TextBlock/schema"; 14 14 + import { Mention, MentionAutocomplete } from "components/Mention"; 22 15 23 16 // Schema with only links, mentions, and hashtags marks 24 17 const bskyPostSchema = new Schema({ ··· 134 127 return tr; 135 128 }); 136 129 } 137 137 - 138 130 export function BlueskyPostEditorProsemirror(props: { 139 139 - editorStateRef: React.MutableRefObject<EditorState | null>; 131 131 + editorStateRef: React.RefObject<EditorState | null>; 140 132 initialContent?: string; 141 133 onCharCountChange?: (count: number) => void; 142 134 }) { 143 135 const mountRef = useRef<HTMLDivElement | null>(null); 144 136 const viewRef = useRef<EditorView | null>(null); 145 137 const [editorState, setEditorState] = useState<EditorState | null>(null); 146 146 - const [mentionState, setMentionState] = useState<{ 147 147 - active: boolean; 148 148 - range: { from: number; to: number } | null; 149 149 - selectedMention: { handle: string; did: string } | null; 150 150 - }>({ active: false, range: null, selectedMention: null }); 138 138 + const [mentionOpen, setMentionOpen] = useState(false); 139 139 + const [mentionCoords, setMentionCoords] = useState<{ 140 140 + top: number; 141 141 + left: number; 142 142 + } | null>(null); 143 143 + const [mentionInsertPos, setMentionInsertPos] = useState<number | null>(null); 144 144 + 145 145 + const openMentionAutocomplete = useCallback(() => { 146 146 + if (!viewRef.current) return; 147 147 + const view = viewRef.current; 148 148 + const pos = view.state.selection.from; 149 149 + setMentionInsertPos(pos); 150 150 + const coords = view.coordsAtPos(pos - 1); 151 151 + 152 152 + // Get coordinates relative to the positioned parent container 153 153 + const editorEl = view.dom; 154 154 + const container = editorEl.closest(".relative") as HTMLElement | null; 155 155 + 156 156 + if (container) { 157 157 + const containerRect = container.getBoundingClientRect(); 158 158 + setMentionCoords({ 159 159 + top: coords.bottom - containerRect.top, 160 160 + left: coords.left - containerRect.left, 161 161 + }); 162 162 + } else { 163 163 + setMentionCoords({ 164 164 + top: coords.bottom, 165 165 + left: coords.left, 166 166 + }); 167 167 + } 168 168 + setMentionOpen(true); 169 169 + }, []); 151 170 152 171 const handleMentionSelect = useCallback( 153 153 - ( 154 154 - mention: { handle: string; did: string }, 155 155 - range: { from: number; to: number }, 156 156 - ) => { 157 157 - if (!viewRef.current) return; 172 172 + (mention: Mention) => { 173 173 + if (!viewRef.current || mentionInsertPos === null) return; 158 174 const view = viewRef.current; 159 159 - const { from, to } = range; 175 175 + const from = mentionInsertPos - 1; 176 176 + const to = mentionInsertPos; 160 177 const tr = view.state.tr; 161 178 162 162 - // Delete the query text (keep the @) 163 163 - tr.delete(from + 1, to); 179 179 + // Delete the @ symbol 180 180 + tr.delete(from, to); 164 181 165 165 - // Insert the mention text after the @ 166 166 - const mentionText = mention.handle; 167 167 - tr.insertText(mentionText, from + 1); 168 168 - 169 169 - // Apply mention mark to @ and handle 170 170 - tr.addMark( 171 171 - from, 172 172 - from + 1 + mentionText.length, 173 173 - bskyPostSchema.marks.mention.create({ did: mention.did }), 174 174 - ); 175 175 - 176 176 - // Add a space after the mention 177 177 - tr.insertText(" ", from + 1 + mentionText.length); 182 182 + if (mention.type === "did") { 183 183 + // Insert @handle with mention mark 184 184 + const mentionText = "@" + mention.handle; 185 185 + tr.insertText(mentionText, from); 186 186 + tr.addMark( 187 187 + from, 188 188 + from + mentionText.length, 189 189 + bskyPostSchema.marks.mention.create({ did: mention.did }), 190 190 + ); 191 191 + tr.insertText(" ", from + mentionText.length); 192 192 + } else if (mention.type === "publication") { 193 193 + // Insert publication name as a link 194 194 + const linkText = mention.name; 195 195 + tr.insertText(linkText, from); 196 196 + tr.addMark( 197 197 + from, 198 198 + from + linkText.length, 199 199 + bskyPostSchema.marks.link.create({ href: mention.url }), 200 200 + ); 201 201 + tr.insertText(" ", from + linkText.length); 202 202 + } else if (mention.type === "post") { 203 203 + // Insert post title as a link 204 204 + const linkText = mention.title; 205 205 + tr.insertText(linkText, from); 206 206 + tr.addMark( 207 207 + from, 208 208 + from + linkText.length, 209 209 + bskyPostSchema.marks.link.create({ href: mention.url }), 210 210 + ); 211 211 + tr.insertText(" ", from + linkText.length); 212 212 + } 178 213 179 214 view.dispatch(tr); 180 215 view.focus(); 181 216 }, 182 182 - [], 217 217 + [mentionInsertPos], 183 218 ); 184 219 185 185 - const mentionStateRef = useRef(mentionState); 186 186 - mentionStateRef.current = mentionState; 220 220 + const handleMentionOpenChange = useCallback((open: boolean) => { 221 221 + setMentionOpen(open); 222 222 + if (!open) { 223 223 + setMentionCoords(null); 224 224 + setMentionInsertPos(null); 225 225 + } 226 226 + }, []); 187 227 188 228 useLayoutEffect(() => { 189 229 if (!mountRef.current) return; 190 230 231 231 + // Input rule to trigger mention autocomplete when @ is typed 232 232 + const mentionInputRule = new InputRule( 233 233 + /(?:^|\s)@$/, 234 234 + (state, match, start, end) => { 235 235 + setTimeout(() => openMentionAutocomplete(), 0); 236 236 + return null; 237 237 + }, 238 238 + ); 239 239 + 191 240 const initialState = EditorState.create({ 192 241 schema: bskyPostSchema, 193 242 doc: props.initialContent ··· 200 249 }) 201 250 : undefined, 202 251 plugins: [ 203 203 - inputRules({ rules: [createHashtagInputRule()] }), 252 252 + inputRules({ rules: [createHashtagInputRule(), mentionInputRule] }), 204 253 keymap({ 205 254 "Mod-z": undo, 206 255 "Mod-y": redo, 207 256 "Shift-Mod-z": redo, 208 208 - Enter: (state, dispatch) => { 209 209 - // Check if mention autocomplete is active 210 210 - const currentMentionState = mentionStateRef.current; 211 211 - if ( 212 212 - currentMentionState.active && 213 213 - currentMentionState.selectedMention && 214 214 - currentMentionState.range 215 215 - ) { 216 216 - handleMentionSelect( 217 217 - currentMentionState.selectedMention, 218 218 - currentMentionState.range, 219 219 - ); 220 220 - return true; 221 221 - } 222 222 - // Otherwise let the default Enter behavior happen (new paragraph) 223 223 - return false; 224 224 - }, 225 257 }), 226 258 keymap(baseKeymap), 227 259 autolink({ ··· 245 277 view.updateState(newState); 246 278 setEditorState(newState); 247 279 props.editorStateRef.current = newState; 248 248 - props.onCharCountChange?.(newState.doc.textContent.length); 280 280 + props.onCharCountChange?.( 281 281 + newState.doc.textContent.length + newState.doc.children.length - 1, 282 282 + ); 249 283 }, 250 284 }, 251 285 ); ··· 256 290 view.destroy(); 257 291 viewRef.current = null; 258 292 }; 259 259 - }, [handleMentionSelect]); 293 293 + }, [openMentionAutocomplete]); 260 294 261 295 return ( 262 296 <div className="relative w-full h-full group"> 263 263 - {editorState && ( 264 264 - <MentionAutocomplete 265 265 - editorState={editorState} 266 266 - view={viewRef} 267 267 - onSelect={handleMentionSelect} 268 268 - onMentionStateChange={(active, range, selectedMention) => { 269 269 - setMentionState({ active, range, selectedMention }); 270 270 - }} 271 271 - /> 272 272 - )} 297 297 + <MentionAutocomplete 298 298 + open={mentionOpen} 299 299 + onOpenChange={handleMentionOpenChange} 300 300 + view={viewRef} 301 301 + onSelect={handleMentionSelect} 302 302 + coords={mentionCoords} 303 303 + placeholder="Search people..." 304 304 + /> 273 305 {editorState?.doc.textContent.length === 0 && ( 274 306 <div className="italic text-tertiary absolute top-0 left-0 pointer-events-none"> 275 307 Write a post to share your writing! ··· 277 309 )} 278 310 <div 279 311 ref={mountRef} 280 280 - className="border-none outline-none whitespace-pre-wrap min-h-[80px] max-h-[200px] overflow-y-auto prose-sm" 312 312 + className="border-none outline-none whitespace-pre-wrap max-h-[240px] overflow-y-auto prose-sm" 281 313 style={{ 282 314 wordWrap: "break-word", 283 315 overflowWrap: "break-word", ··· 288 320 ); 289 321 } 290 322 291 291 - function MentionAutocomplete(props: { 292 292 - editorState: EditorState; 293 293 - view: React.RefObject<EditorView | null>; 294 294 - onSelect: ( 295 295 - mention: { handle: string; did: string }, 296 296 - range: { from: number; to: number }, 297 297 - ) => void; 298 298 - onMentionStateChange: ( 299 299 - active: boolean, 300 300 - range: { from: number; to: number } | null, 301 301 - selectedMention: { handle: string; did: string } | null, 302 302 - ) => void; 303 303 - }) { 304 304 - const [mentionQuery, setMentionQuery] = useState<string | null>(null); 305 305 - const [mentionRange, setMentionRange] = useState<{ 306 306 - from: number; 307 307 - to: number; 308 308 - } | null>(null); 309 309 - const [mentionCoords, setMentionCoords] = useState<{ 310 310 - top: number; 311 311 - left: number; 312 312 - } | null>(null); 313 313 - 314 314 - const { suggestionIndex, setSuggestionIndex, suggestions } = 315 315 - useMentionSuggestions(mentionQuery); 316 316 - 317 317 - // Check for mention pattern whenever editor state changes 318 318 - useEffect(() => { 319 319 - const { $from } = props.editorState.selection; 320 320 - const textBefore = $from.parent.textBetween( 321 321 - Math.max(0, $from.parentOffset - 50), 322 322 - $from.parentOffset, 323 323 - null, 324 324 - "\ufffc", 325 325 - ); 326 326 - 327 327 - // Look for @ followed by word characters before cursor 328 328 - const match = textBefore.match(/@([\w.]*)$/); 329 329 - 330 330 - if (match && props.view.current) { 331 331 - const queryBefore = match[1]; 332 332 - const from = $from.pos - queryBefore.length - 1; 333 333 - 334 334 - // Get text after cursor to find the rest of the handle 335 335 - const textAfter = $from.parent.textBetween( 336 336 - $from.parentOffset, 337 337 - Math.min($from.parent.content.size, $from.parentOffset + 50), 338 338 - null, 339 339 - "\ufffc", 340 340 - ); 341 341 - 342 342 - // Match word characters after cursor until space or end 343 343 - const afterMatch = textAfter.match(/^([\w.]*)/); 344 344 - const queryAfter = afterMatch ? afterMatch[1] : ""; 345 345 - 346 346 - // Combine the full handle 347 347 - const query = queryBefore + queryAfter; 348 348 - const to = $from.pos + queryAfter.length; 349 349 - 350 350 - setMentionQuery(query); 351 351 - setMentionRange({ from, to }); 352 352 - 353 353 - // Get coordinates for the autocomplete popup 354 354 - const coords = props.view.current.coordsAtPos(from); 355 355 - setMentionCoords({ 356 356 - top: coords.bottom + window.scrollY, 357 357 - left: coords.left + window.scrollX, 358 358 - }); 359 359 - setSuggestionIndex(0); 360 360 - } else { 361 361 - setMentionQuery(null); 362 362 - setMentionRange(null); 363 363 - setMentionCoords(null); 364 364 - } 365 365 - }, [props.editorState, props.view, setSuggestionIndex]); 366 366 - 367 367 - // Update parent's mention state 368 368 - useEffect(() => { 369 369 - const active = mentionQuery !== null && suggestions.length > 0; 370 370 - const selectedMention = 371 371 - active && suggestions[suggestionIndex] 372 372 - ? suggestions[suggestionIndex] 373 373 - : null; 374 374 - props.onMentionStateChange(active, mentionRange, selectedMention); 375 375 - }, [mentionQuery, suggestions, suggestionIndex, mentionRange]); 376 376 - 377 377 - // Handle keyboard navigation for arrow keys only 378 378 - useEffect(() => { 379 379 - if (!mentionQuery || !props.view.current) return; 380 380 - 381 381 - const handleKeyDown = (e: KeyboardEvent) => { 382 382 - if (suggestions.length === 0) return; 383 383 - 384 384 - if (e.key === "ArrowUp") { 385 385 - e.preventDefault(); 386 386 - if (suggestionIndex > 0) { 387 387 - setSuggestionIndex((i) => i - 1); 388 388 - } 389 389 - } else if (e.key === "ArrowDown") { 390 390 - e.preventDefault(); 391 391 - if (suggestionIndex < suggestions.length - 1) { 392 392 - setSuggestionIndex((i) => i + 1); 393 393 - } 394 394 - } 395 395 - }; 396 396 - 397 397 - const dom = props.view.current.dom; 398 398 - dom.addEventListener("keydown", handleKeyDown); 399 399 - 400 400 - return () => { 401 401 - dom.removeEventListener("keydown", handleKeyDown); 402 402 - }; 403 403 - }, [ 404 404 - mentionQuery, 405 405 - suggestions, 406 406 - suggestionIndex, 407 407 - props.view, 408 408 - setSuggestionIndex, 409 409 - ]); 410 410 - 411 411 - if (!mentionCoords || suggestions.length === 0) return null; 412 412 - 413 413 - // The styles in this component should match the Menu styles in components/Layout.tsx 414 414 - return ( 415 415 - <Popover.Root open> 416 416 - {createPortal( 417 417 - <Popover.Anchor 418 418 - style={{ 419 419 - top: mentionCoords.top, 420 420 - left: mentionCoords.left, 421 421 - position: "absolute", 422 422 - }} 423 423 - />, 424 424 - document.body, 425 425 - )} 426 426 - <Popover.Portal> 427 427 - <Popover.Content 428 428 - side="bottom" 429 429 - align="start" 430 430 - sideOffset={4} 431 431 - collisionPadding={20} 432 432 - onOpenAutoFocus={(e) => e.preventDefault()} 433 433 - className={`dropdownMenu z-20 bg-bg-page flex flex-col py-1 gap-0.5 border border-border rounded-md shadow-md`} 434 434 - > 435 435 - <ul className="list-none p-0 text-sm"> 436 436 - {suggestions.map((result, index) => { 437 437 - return ( 438 438 - <div 439 439 - className={` 440 440 - MenuItem 441 441 - font-bold z-10 py-1 px-3 442 442 - text-left text-secondary 443 443 - flex gap-2 444 444 - ${index === suggestionIndex ? "bg-border-light data-[highlighted]:text-secondary" : ""} 445 445 - hover:bg-border-light hover:text-secondary 446 446 - outline-none 447 447 - `} 448 448 - key={result.did} 449 449 - onClick={() => { 450 450 - if (mentionRange) { 451 451 - props.onSelect(result, mentionRange); 452 452 - setMentionQuery(null); 453 453 - setMentionRange(null); 454 454 - setMentionCoords(null); 455 455 - } 456 456 - }} 457 457 - onMouseDown={(e) => e.preventDefault()} 458 458 - > 459 459 - @{result.handle} 460 460 - </div> 461 461 - ); 462 462 - })} 463 463 - </ul> 464 464 - </Popover.Content> 465 465 - </Popover.Portal> 466 466 - </Popover.Root> 467 467 - ); 468 468 - } 469 469 - 470 470 - function useMentionSuggestions(query: string | null) { 471 471 - const [suggestionIndex, setSuggestionIndex] = useState(0); 472 472 - const [suggestions, setSuggestions] = useState< 473 473 - { handle: string; did: string }[] 474 474 - >([]); 475 475 - 476 476 - useDebouncedEffect( 477 477 - async () => { 478 478 - if (!query) { 479 479 - setSuggestions([]); 480 480 - return; 481 481 - } 482 482 - 483 483 - const agent = new Agent("https://public.api.bsky.app"); 484 484 - const result = await agent.searchActorsTypeahead({ 485 485 - q: query, 486 486 - limit: 8, 487 487 - }); 488 488 - setSuggestions( 489 489 - result.data.actors.map((actor) => ({ 490 490 - handle: actor.handle, 491 491 - did: actor.did, 492 492 - })), 493 493 - ); 494 494 - }, 495 495 - 300, 496 496 - [query], 497 497 - ); 498 498 - 499 499 - useEffect(() => { 500 500 - if (suggestionIndex > suggestions.length - 1) { 501 501 - setSuggestionIndex(Math.max(0, suggestions.length - 1)); 502 502 - } 503 503 - }, [suggestionIndex, suggestions.length]); 504 504 - 505 505 - return { 506 506 - suggestions, 507 507 - suggestionIndex, 508 508 - setSuggestionIndex, 509 509 - }; 510 510 - } 511 511 - 512 323 /** 513 324 * Converts a ProseMirror editor state to Bluesky post facets. 514 325 * Extracts mentions, links, and hashtags from the editor state and returns them ··· 593 404 594 405 return features; 595 406 } 407 407 + 408 408 + export const addMentionToEditor = ( 409 409 + mention: Mention, 410 410 + range: { from: number; to: number }, 411 411 + view: EditorView, 412 412 + ) => { 413 413 + console.log("view", view); 414 414 + if (!view) return; 415 415 + const { from, to } = range; 416 416 + const tr = view.state.tr; 417 417 + 418 418 + if (mention.type == "did") { 419 419 + // Delete the @ and any query text 420 420 + tr.delete(from, to); 421 421 + // Insert didMention inline node 422 422 + const mentionText = "@" + mention.handle; 423 423 + const didMentionNode = schema.nodes.didMention.create({ 424 424 + did: mention.did, 425 425 + text: mentionText, 426 426 + }); 427 427 + tr.insert(from, didMentionNode); 428 428 + } 429 429 + if (mention.type === "publication" || mention.type === "post") { 430 430 + // Delete the @ and any query text 431 431 + tr.delete(from, to); 432 432 + let name = mention.type == "post" ? mention.title : mention.name; 433 433 + // Insert atMention inline node 434 434 + const atMentionNode = schema.nodes.atMention.create({ 435 435 + atURI: mention.uri, 436 436 + text: name, 437 437 + }); 438 438 + tr.insert(from, atMentionNode); 439 439 + } 440 440 + console.log("yo", mention); 441 441 + 442 442 + // Add a space after the mention 443 443 + tr.insertText(" ", from + 1); 444 444 + 445 445 + view.dispatch(tr); 446 446 + view.focus(); 447 447 + };

+202 -90

app/[leaflet_id]/publish/PublishPost.tsx

··· 6 6 import { Radio } from "components/Checkbox"; 7 7 import { useParams } from "next/navigation"; 8 8 import Link from "next/link"; 9 9 - import { AutosizeTextarea } from "components/utils/AutosizeTextarea"; 9 9 + 10 10 import { PubLeafletPublication } from "lexicons/api"; 11 11 import { publishPostToBsky } from "./publishBskyPost"; 12 12 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs"; 13 13 import { AtUri } from "@atproto/syntax"; 14 14 import { PublishIllustration } from "./PublishIllustration/PublishIllustration"; 15 15 import { useReplicache } from "src/replicache"; 16 16 + import { useSubscribe } from "src/replicache/useSubscribe"; 16 17 import { 17 18 BlueskyPostEditorProsemirror, 18 19 editorStateToFacetedText, 19 20 } from "./BskyPostEditorProsemirror"; 20 21 import { EditorState } from "prosemirror-state"; 22 22 + import { TagSelector } from "../../../components/Tags"; 23 23 + import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; 24 24 + import { PubIcon } from "components/ActionBar/Publications"; 21 25 22 26 type Props = { 23 27 title: string; ··· 25 29 root_entity: string; 26 30 profile: ProfileViewDetailed; 27 31 description: string; 28 28 - publication_uri: string; 32 32 + publication_uri?: string; 29 33 record?: PubLeafletPublication.Record; 30 34 posts_in_pub?: number; 35 35 + entitiesToDelete?: string[]; 36 36 + hasDraft: boolean; 31 37 }; 32 38 33 39 export function PublishPost(props: Props) { ··· 35 41 { state: "default" } | { state: "success"; post_url: string } 36 42 >({ state: "default" }); 37 43 return ( 38 38 - <div className="publishPage w-screen h-full bg-bg-page flex sm:pt-0 pt-4 sm:place-items-center justify-center"> 44 44 + <div className="publishPage w-screen h-full bg-bg-page flex sm:pt-0 pt-4 sm:place-items-center justify-center text-primary"> 39 45 {publishState.state === "default" ? ( 40 46 <PublishPostForm setPublishState={setPublishState} {...props} /> 41 47 ) : ( ··· 55 61 setPublishState: (s: { state: "success"; post_url: string }) => void; 56 62 } & Props, 57 63 ) => { 58 58 - let [shareOption, setShareOption] = useState<"bluesky" | "quiet">("bluesky"); 59 64 let editorStateRef = useRef<EditorState | null>(null); 60 60 - let [isLoading, setIsLoading] = useState(false); 61 65 let [charCount, setCharCount] = useState(0); 66 66 + let [shareOption, setShareOption] = useState<"bluesky" | "quiet">("bluesky"); 67 67 + let [isLoading, setIsLoading] = useState(false); 62 68 let params = useParams(); 63 69 let { rep } = useReplicache(); 64 70 71 71 + // For publications with drafts, use Replicache; otherwise use local state 72 72 + let replicacheTags = useSubscribe(rep, (tx) => 73 73 + tx.get<string[]>("publication_tags"), 74 74 + ); 75 75 + let [localTags, setLocalTags] = useState<string[]>([]); 76 76 + 77 77 + // Use Replicache tags only when we have a draft 78 78 + const hasDraft = props.hasDraft; 79 79 + const currentTags = hasDraft 80 80 + ? Array.isArray(replicacheTags) 81 81 + ? replicacheTags 82 82 + : [] 83 83 + : localTags; 84 84 + 85 85 + // Update tags via Replicache mutation or local state depending on context 86 86 + const handleTagsChange = async (newTags: string[]) => { 87 87 + if (hasDraft) { 88 88 + await rep?.mutate.updatePublicationDraft({ 89 89 + tags: newTags, 90 90 + }); 91 91 + } else { 92 92 + setLocalTags(newTags); 93 93 + } 94 94 + }; 95 95 + 65 96 async function submit() { 66 97 if (isLoading) return; 67 98 setIsLoading(true); ··· 72 103 leaflet_id: props.leaflet_id, 73 104 title: props.title, 74 105 description: props.description, 106 106 + tags: currentTags, 107 107 + entitiesToDelete: props.entitiesToDelete, 75 108 }); 76 109 if (!doc) return; 77 110 78 78 - let post_url = `https://${props.record?.base_path}/${doc.rkey}`; 111 111 + // Generate post URL based on whether it's in a publication or standalone 112 112 + let post_url = props.record?.base_path 113 113 + ? `https://${props.record.base_path}/${doc.rkey}` 114 114 + : `https://leaflet.pub/p/${props.profile.did}/${doc.rkey}`; 115 115 + 79 116 let [text, facets] = editorStateRef.current 80 117 ? editorStateToFacetedText(editorStateRef.current) 81 118 : []; ··· 95 132 96 133 return ( 97 134 <div className="flex flex-col gap-4 w-[640px] max-w-full sm:px-4 px-3 text-primary"> 98 98 - <h3>Publish Options</h3> 99 135 <form 100 136 onSubmit={(e) => { 101 137 e.preventDefault(); 102 138 submit(); 103 139 }} 104 140 > 105 105 - <div className="container flex flex-col gap-2 sm:p-3 p-4"> 106 106 - <Radio 107 107 - checked={shareOption === "quiet"} 108 108 - onChange={(e) => { 109 109 - if (e.target === e.currentTarget) { 110 110 - setShareOption("quiet"); 111 111 - } 112 112 - }} 113 113 - name="share-options" 114 114 - id="share-quietly" 115 115 - value="Share Quietly" 116 116 - > 117 117 - <div className="flex flex-col"> 118 118 - <div className="font-bold">Share Quietly</div> 119 119 - <div className="text-sm text-tertiary font-normal"> 120 120 - No one will be notified about this post 121 121 - </div> 122 122 - </div> 123 123 - </Radio> 124 124 - <Radio 125 125 - checked={shareOption === "bluesky"} 126 126 - onChange={(e) => { 127 127 - if (e.target === e.currentTarget) { 128 128 - setShareOption("bluesky"); 129 129 - } 130 130 - }} 131 131 - name="share-options" 132 132 - id="share-bsky" 133 133 - value="Share on Bluesky" 134 134 - > 135 135 - <div className="flex flex-col"> 136 136 - <div className="font-bold">Share on Bluesky</div> 137 137 - <div className="text-sm text-tertiary font-normal"> 138 138 - Pub subscribers will be updated via a custom Bluesky feed 139 139 - </div> 140 140 - </div> 141 141 - </Radio> 142 142 - 143 143 - <div 144 144 - className={`w-full pl-5 pb-4 ${shareOption !== "bluesky" ? "opacity-50" : ""}`} 145 145 - > 146 146 - <div className="opaque-container p-3 rounded-lg!"> 147 147 - <div className="flex gap-2"> 148 148 - <img 149 149 - className="rounded-full w-[42px] h-[42px] shrink-0" 150 150 - src={props.profile.avatar} 151 151 - /> 152 152 - <div className="flex flex-col w-full"> 153 153 - <div className="flex gap-2 pb-1"> 154 154 - <p className="font-bold">{props.profile.displayName}</p> 155 155 - <p className="text-tertiary">@{props.profile.handle}</p> 156 156 - </div> 157 157 - <div className="flex flex-col"> 158 158 - <BlueskyPostEditorProsemirror 159 159 - editorStateRef={editorStateRef} 160 160 - onCharCountChange={setCharCount} 161 161 - /> 162 162 - </div> 163 163 - <div className="opaque-container overflow-hidden flex flex-col mt-4 w-full"> 164 164 - <div className="flex flex-col p-2"> 165 165 - <div className="font-bold">{props.title}</div> 166 166 - <div className="text-tertiary">{props.description}</div> 167 167 - <hr className="border-border-light mt-2 mb-1" /> 168 168 - <p className="text-xs text-tertiary"> 169 169 - {props.record?.base_path} 170 170 - </p> 171 171 - </div> 172 172 - </div> 173 173 - <div className="text-xs text-secondary italic place-self-end pt-2"> 174 174 - {charCount}/300 175 175 - </div> 176 176 - </div> 177 177 - </div> 178 178 - </div> 141 141 + <div className="container flex flex-col gap-3 sm:p-3 p-4"> 142 142 + <PublishingTo 143 143 + publication_uri={props.publication_uri} 144 144 + record={props.record} 145 145 + /> 146 146 + <hr className="border-border" /> 147 147 + <ShareOptions 148 148 + setShareOption={setShareOption} 149 149 + shareOption={shareOption} 150 150 + charCount={charCount} 151 151 + setCharCount={setCharCount} 152 152 + editorStateRef={editorStateRef} 153 153 + {...props} 154 154 + /> 155 155 + <hr className="border-border " /> 156 156 + <div className="flex flex-col gap-2"> 157 157 + <h4>Tags</h4> 158 158 + <TagSelector 159 159 + selectedTags={currentTags} 160 160 + setSelectedTags={handleTagsChange} 161 161 + /> 179 162 </div> 163 163 + <hr className="border-border mb-2" /> 164 164 + 180 165 <div className="flex justify-between"> 181 166 <Link 182 167 className="hover:no-underline! font-bold" ··· 198 183 ); 199 184 }; 200 185 186 186 + const ShareOptions = (props: { 187 187 + shareOption: "quiet" | "bluesky"; 188 188 + setShareOption: (option: typeof props.shareOption) => void; 189 189 + charCount: number; 190 190 + setCharCount: (c: number) => void; 191 191 + editorStateRef: React.MutableRefObject<EditorState | null>; 192 192 + title: string; 193 193 + profile: ProfileViewDetailed; 194 194 + description: string; 195 195 + record?: PubLeafletPublication.Record; 196 196 + }) => { 197 197 + return ( 198 198 + <div className="flex flex-col gap-2"> 199 199 + <h4>Notifications</h4> 200 200 + <Radio 201 201 + checked={props.shareOption === "quiet"} 202 202 + onChange={(e) => { 203 203 + if (e.target === e.currentTarget) { 204 204 + props.setShareOption("quiet"); 205 205 + } 206 206 + }} 207 207 + name="share-options" 208 208 + id="share-quietly" 209 209 + value="Share Quietly" 210 210 + > 211 211 + <div className="flex flex-col"> 212 212 + <div className="font-bold">Share Quietly</div> 213 213 + <div className="text-sm text-tertiary font-normal"> 214 214 + No one will be notified about this post 215 215 + </div> 216 216 + </div> 217 217 + </Radio> 218 218 + <Radio 219 219 + checked={props.shareOption === "bluesky"} 220 220 + onChange={(e) => { 221 221 + if (e.target === e.currentTarget) { 222 222 + props.setShareOption("bluesky"); 223 223 + } 224 224 + }} 225 225 + name="share-options" 226 226 + id="share-bsky" 227 227 + value="Share on Bluesky" 228 228 + > 229 229 + <div className="flex flex-col"> 230 230 + <div className="font-bold">Share on Bluesky</div> 231 231 + <div className="text-sm text-tertiary font-normal"> 232 232 + Pub subscribers will be updated via a custom Bluesky feed 233 233 + </div> 234 234 + </div> 235 235 + </Radio> 236 236 + <div 237 237 + className={`w-full pl-5 pb-4 ${props.shareOption !== "bluesky" ? "opacity-50" : ""}`} 238 238 + > 239 239 + <div className="opaque-container py-2 px-3 text-sm rounded-lg!"> 240 240 + <div className="flex gap-2"> 241 241 + <img 242 242 + className="rounded-full w-6 h-6 sm:w-[42px] sm:h-[42px] shrink-0" 243 243 + src={props.profile.avatar} 244 244 + /> 245 245 + <div className="flex flex-col w-full"> 246 246 + <div className="flex gap-2 "> 247 247 + <p className="font-bold">{props.profile.displayName}</p> 248 248 + <p className="text-tertiary">@{props.profile.handle}</p> 249 249 + </div> 250 250 + <div className="flex flex-col"> 251 251 + <BlueskyPostEditorProsemirror 252 252 + editorStateRef={props.editorStateRef} 253 253 + onCharCountChange={props.setCharCount} 254 254 + /> 255 255 + </div> 256 256 + <div className="opaque-container !border-border overflow-hidden flex flex-col mt-4 w-full"> 257 257 + <div className="flex flex-col p-2"> 258 258 + <div className="font-bold">{props.title}</div> 259 259 + <div className="text-tertiary">{props.description}</div> 260 260 + <hr className="border-border mt-2 mb-1" /> 261 261 + <p className="text-xs text-tertiary"> 262 262 + {props.record?.base_path} 263 263 + </p> 264 264 + </div> 265 265 + </div> 266 266 + <div className="text-xs text-secondary italic place-self-end pt-2"> 267 267 + {props.charCount}/300 268 268 + </div> 269 269 + </div> 270 270 + </div> 271 271 + </div> 272 272 + </div> 273 273 + </div> 274 274 + ); 275 275 + }; 276 276 + 277 277 + const PublishingTo = (props: { 278 278 + publication_uri?: string; 279 279 + record?: PubLeafletPublication.Record; 280 280 + }) => { 281 281 + if (props.publication_uri && props.record) { 282 282 + return ( 283 283 + <div className="flex flex-col gap-1"> 284 284 + <h3>Publishing to</h3> 285 285 + <div className="flex gap-2 items-center p-2 rounded-md bg-[var(--accent-light)]"> 286 286 + <PubIcon record={props.record} uri={props.publication_uri} /> 287 287 + <div className="font-bold text-secondary">{props.record.name}</div> 288 288 + </div> 289 289 + </div> 290 290 + ); 291 291 + } 292 292 + 293 293 + return ( 294 294 + <div className="flex flex-col gap-1"> 295 295 + <h3>Publishing as</h3> 296 296 + <div className="flex gap-2 items-center p-2 rounded-md bg-[var(--accent-light)]"> 297 297 + <LooseLeafSmall className="shrink-0" /> 298 298 + <div className="font-bold text-secondary">Looseleaf</div> 299 299 + </div> 300 300 + </div> 301 301 + ); 302 302 + }; 303 303 + 201 304 const PublishPostSuccess = (props: { 202 305 post_url: string; 203 203 - publication_uri: string; 306 306 + publication_uri?: string; 204 307 record: Props["record"]; 205 308 posts_in_pub: number; 206 309 }) => { 207 207 - let uri = new AtUri(props.publication_uri); 310 310 + let uri = props.publication_uri ? new AtUri(props.publication_uri) : null; 208 311 return ( 209 312 <div className="container p-4 m-3 sm:m-4 flex flex-col gap-1 justify-center text-center w-fit h-fit mx-auto"> 210 313 <PublishIllustration posts_in_pub={props.posts_in_pub} /> 211 211 - <h2 className="pt-2 text-primary">Published!</h2> 212 212 - <Link 213 213 - className="hover:no-underline! font-bold place-self-center pt-2" 214 214 - href={`/lish/${uri.host}/${encodeURIComponent(props.record?.name || "")}/dashboard`} 215 215 - > 216 216 - <ButtonPrimary>Back to Dashboard</ButtonPrimary> 217 217 - </Link> 314 314 + <h2 className="pt-2">Published!</h2> 315 315 + {uri && props.record ? ( 316 316 + <Link 317 317 + className="hover:no-underline! font-bold place-self-center pt-2" 318 318 + href={`/lish/${uri.host}/${encodeURIComponent(props.record.name || "")}/dashboard`} 319 319 + > 320 320 + <ButtonPrimary>Back to Dashboard</ButtonPrimary> 321 321 + </Link> 322 322 + ) : ( 323 323 + <Link 324 324 + className="hover:no-underline! font-bold place-self-center pt-2" 325 325 + href="/" 326 326 + > 327 327 + <ButtonPrimary>Back to Home</ButtonPrimary> 328 328 + </Link> 329 329 + )} 218 330 <a href={props.post_url}>See published post</a> 219 331 </div> 220 332 );

+69 -9

app/[leaflet_id]/publish/page.tsx

··· 13 13 type Props = { 14 14 // this is now a token id not leaflet! Should probs rename 15 15 params: Promise<{ leaflet_id: string }>; 16 16 + searchParams: Promise<{ 17 17 + publication_uri: string; 18 18 + title: string; 19 19 + description: string; 20 20 + entitiesToDelete: string; 21 21 + }>; 16 22 }; 17 23 export default async function PublishLeafletPage(props: Props) { 18 24 let leaflet_id = (await props.params).leaflet_id; ··· 27 33 *, 28 34 documents_in_publications(count) 29 35 ), 30 30 - documents(*))`, 36 36 + documents(*)), 37 37 + leaflets_to_documents( 38 38 + *, 39 39 + documents(*) 40 40 + )`, 31 41 ) 32 42 .eq("id", leaflet_id) 33 43 .single(); 34 44 let rootEntity = data?.root_entity; 35 35 - if (!data || !rootEntity || !data.leaflets_in_publications[0]) 45 45 + 46 46 + // Try to find publication from leaflets_in_publications first 47 47 + let publication = data?.leaflets_in_publications[0]?.publications; 48 48 + 49 49 + // If not found, check if publication_uri is in searchParams 50 50 + if (!publication) { 51 51 + let pub_uri = (await props.searchParams).publication_uri; 52 52 + if (pub_uri) { 53 53 + console.log(decodeURIComponent(pub_uri)); 54 54 + let { data: pubData, error } = await supabaseServerClient 55 55 + .from("publications") 56 56 + .select("*, documents_in_publications(count)") 57 57 + .eq("uri", decodeURIComponent(pub_uri)) 58 58 + .single(); 59 59 + console.log(error); 60 60 + publication = pubData; 61 61 + } 62 62 + } 63 63 + 64 64 + // Check basic data requirements 65 65 + if (!data || !rootEntity) 36 66 return ( 37 67 <div> 38 68 missin something ··· 42 72 43 73 let identity = await getIdentityData(); 44 74 if (!identity || !identity.atp_did) return null; 45 45 - let pub = data.leaflets_in_publications[0]; 46 46 - let agent = new AtpAgent({ service: "https://public.api.bsky.app" }); 47 75 76 76 + // Get title and description from either source 77 77 + let title = 78 78 + data.leaflets_in_publications[0]?.title || 79 79 + data.leaflets_to_documents[0]?.title || 80 80 + decodeURIComponent((await props.searchParams).title || ""); 81 81 + let description = 82 82 + data.leaflets_in_publications[0]?.description || 83 83 + data.leaflets_to_documents[0]?.description || 84 84 + decodeURIComponent((await props.searchParams).description || ""); 85 85 + 86 86 + let agent = new AtpAgent({ service: "https://public.api.bsky.app" }); 48 87 let profile = await agent.getProfile({ actor: identity.atp_did }); 88 88 + 89 89 + // Parse entitiesToDelete from URL params 90 90 + let searchParams = await props.searchParams; 91 91 + let entitiesToDelete: string[] = []; 92 92 + try { 93 93 + if (searchParams.entitiesToDelete) { 94 94 + entitiesToDelete = JSON.parse( 95 95 + decodeURIComponent(searchParams.entitiesToDelete), 96 96 + ); 97 97 + } 98 98 + } catch (e) { 99 99 + // If parsing fails, just use empty array 100 100 + } 101 101 + 102 102 + // Check if a draft record exists (either in a publication or standalone) 103 103 + let hasDraft = 104 104 + data.leaflets_in_publications.length > 0 || 105 105 + data.leaflets_to_documents.length > 0; 106 106 + 49 107 return ( 50 108 <ReplicacheProvider 51 109 rootEntity={rootEntity} ··· 57 115 leaflet_id={leaflet_id} 58 116 root_entity={rootEntity} 59 117 profile={profile.data} 60 60 - title={pub.title} 61 61 - publication_uri={pub.publication} 62 62 - description={pub.description} 63 63 - record={pub.publications?.record as PubLeafletPublication.Record} 64 64 - posts_in_pub={pub.publications?.documents_in_publications[0].count} 118 118 + title={title} 119 119 + description={description} 120 120 + publication_uri={publication?.uri} 121 121 + record={publication?.record as PubLeafletPublication.Record | undefined} 122 122 + posts_in_pub={publication?.documents_in_publications[0]?.count} 123 123 + entitiesToDelete={entitiesToDelete} 124 124 + hasDraft={hasDraft} 65 125 /> 66 126 </ReplicacheProvider> 67 127 );

+80 -17

app/api/inngest/functions/index_post_mention.ts

··· 3 3 import { AtpAgent, AtUri } from "@atproto/api"; 4 4 import { Json } from "supabase/database.types"; 5 5 import { ids } from "lexicons/api/lexicons"; 6 6 + import { Notification, pingIdentityToUpdateNotification } from "src/notifications"; 7 7 + import { v7 } from "uuid"; 8 8 + import { idResolver } from "app/(home-pages)/reader/idResolver"; 6 9 7 10 export const index_post_mention = inngest.createFunction( 8 11 { id: "index_post_mention" }, ··· 11 14 let url = new URL(event.data.document_link); 12 15 let path = url.pathname.split("/").filter(Boolean); 13 16 14 14 - let { data: pub, error } = await supabaseServerClient 15 15 - .from("publications") 16 16 - .select("*") 17 17 - .eq("record->>base_path", url.host) 18 18 - .single(); 17 17 + // Check if this is a standalone document URL (/p/didOrHandle/rkey/...) 18 18 + const isStandaloneDoc = path[0] === "p" && path.length >= 3; 19 19 + 20 20 + let documentUri: string; 21 21 + let authorDid: string; 22 22 + 23 23 + if (isStandaloneDoc) { 24 24 + // Standalone doc: /p/didOrHandle/rkey/l-quote/... 25 25 + const didOrHandle = decodeURIComponent(path[1]); 26 26 + const rkey = path[2]; 27 27 + 28 28 + // Resolve handle to DID if necessary 29 29 + let did = didOrHandle; 30 30 + if (!didOrHandle.startsWith("did:")) { 31 31 + const resolved = await step.run("resolve-handle", async () => { 32 32 + return idResolver.handle.resolve(didOrHandle); 33 33 + }); 34 34 + if (!resolved) { 35 35 + return { message: `Could not resolve handle: ${didOrHandle}` }; 36 36 + } 37 37 + did = resolved; 38 38 + } 19 39 20 20 - if (!pub) { 21 21 - return { 22 22 - message: `No publication found for ${url.host}/${path[0]}`, 23 23 - error, 24 24 - }; 40 40 + documentUri = AtUri.make(did, ids.PubLeafletDocument, rkey).toString(); 41 41 + authorDid = did; 42 42 + } else { 43 43 + // Publication post: look up by custom domain 44 44 + let { data: pub, error } = await supabaseServerClient 45 45 + .from("publications") 46 46 + .select("*") 47 47 + .eq("record->>base_path", url.host) 48 48 + .single(); 49 49 + 50 50 + if (!pub) { 51 51 + return { 52 52 + message: `No publication found for ${url.host}/${path[0]}`, 53 53 + error, 54 54 + }; 55 55 + } 56 56 + 57 57 + documentUri = AtUri.make( 58 58 + pub.identity_did, 59 59 + ids.PubLeafletDocument, 60 60 + path[0], 61 61 + ).toString(); 62 62 + authorDid = pub.identity_did; 25 63 } 26 64 27 65 let bsky_post = await step.run("get-bsky-post-data", async () => { ··· 38 76 } 39 77 40 78 await step.run("index-bsky-post", async () => { 41 41 - await supabaseServerClient.from("bsky_posts").insert({ 79 79 + await supabaseServerClient.from("bsky_posts").upsert({ 42 80 uri: bsky_post.uri, 43 81 cid: bsky_post.cid, 44 82 post_view: bsky_post as Json, 45 83 }); 46 46 - await supabaseServerClient.from("document_mentions_in_bsky").insert({ 84 84 + await supabaseServerClient.from("document_mentions_in_bsky").upsert({ 47 85 uri: bsky_post.uri, 48 48 - document: AtUri.make( 49 49 - pub.identity_did, 50 50 - ids.PubLeafletDocument, 51 51 - path[0], 52 52 - ).toString(), 86 86 + document: documentUri, 53 87 link: event.data.document_link, 54 88 }); 89 89 + }); 90 90 + 91 91 + await step.run("create-notification", async () => { 92 92 + // Only create notification if the quote is from someone other than the author 93 93 + if (bsky_post.author.did !== authorDid) { 94 94 + // Check if a notification already exists for this post and recipient 95 95 + const { data: existingNotification } = await supabaseServerClient 96 96 + .from("notifications") 97 97 + .select("id") 98 98 + .eq("recipient", authorDid) 99 99 + .eq("data->>type", "quote") 100 100 + .eq("data->>bsky_post_uri", bsky_post.uri) 101 101 + .eq("data->>document_uri", documentUri) 102 102 + .single(); 103 103 + 104 104 + if (!existingNotification) { 105 105 + const notification: Notification = { 106 106 + id: v7(), 107 107 + recipient: authorDid, 108 108 + data: { 109 109 + type: "quote", 110 110 + bsky_post_uri: bsky_post.uri, 111 111 + document_uri: documentUri, 112 112 + }, 113 113 + }; 114 114 + await supabaseServerClient.from("notifications").insert(notification); 115 115 + await pingIdentityToUpdateNotification(authorDid); 116 116 + } 117 117 + } 55 118 }); 56 119 }, 57 120 );

+1 -1

app/api/link_previews/route.ts

··· 22 22 let result = await get_link_metadata(url); 23 23 return Response.json(result); 24 24 } else { 25 25 - let result = await get_link_image_preview(url); 25 25 + let result = await get_link_image_preview(body.url); 26 26 return Response.json(result); 27 27 } 28 28 }

+145

app/api/pub_icon/route.ts

··· 1 1 + import { AtUri } from "@atproto/syntax"; 2 2 + import { IdResolver } from "@atproto/identity"; 3 3 + import { NextRequest, NextResponse } from "next/server"; 4 4 + import { PubLeafletPublication } from "lexicons/api"; 5 5 + import { supabaseServerClient } from "supabase/serverClient"; 6 6 + import sharp from "sharp"; 7 7 + 8 8 + const idResolver = new IdResolver(); 9 9 + 10 10 + export const runtime = "nodejs"; 11 11 + 12 12 + export async function GET(req: NextRequest) { 13 13 + const searchParams = req.nextUrl.searchParams; 14 14 + const bgColor = searchParams.get("bg") || "#0000E1"; 15 15 + const fgColor = searchParams.get("fg") || "#FFFFFF"; 16 16 + 17 17 + try { 18 18 + const at_uri = searchParams.get("at_uri"); 19 19 + 20 20 + if (!at_uri) { 21 21 + return new NextResponse(null, { status: 400 }); 22 22 + } 23 23 + 24 24 + // Parse the AT URI 25 25 + let uri: AtUri; 26 26 + try { 27 27 + uri = new AtUri(at_uri); 28 28 + } catch (e) { 29 29 + return new NextResponse(null, { status: 400 }); 30 30 + } 31 31 + 32 32 + let publicationRecord: PubLeafletPublication.Record | null = null; 33 33 + let publicationUri: string; 34 34 + 35 35 + // Check if it's a document or publication 36 36 + if (uri.collection === "pub.leaflet.document") { 37 37 + // Query the documents_in_publications table to get the publication 38 38 + const { data: docInPub } = await supabaseServerClient 39 39 + .from("documents_in_publications") 40 40 + .select("publication, publications(record)") 41 41 + .eq("document", at_uri) 42 42 + .single(); 43 43 + 44 44 + if (!docInPub || !docInPub.publications) { 45 45 + return new NextResponse(null, { status: 404 }); 46 46 + } 47 47 + 48 48 + publicationUri = docInPub.publication; 49 49 + publicationRecord = docInPub.publications 50 50 + .record as PubLeafletPublication.Record; 51 51 + } else if (uri.collection === "pub.leaflet.publication") { 52 52 + // Query the publications table directly 53 53 + const { data: publication } = await supabaseServerClient 54 54 + .from("publications") 55 55 + .select("record, uri") 56 56 + .eq("uri", at_uri) 57 57 + .single(); 58 58 + 59 59 + if (!publication || !publication.record) { 60 60 + return new NextResponse(null, { status: 404 }); 61 61 + } 62 62 + 63 63 + publicationUri = publication.uri; 64 64 + publicationRecord = publication.record as PubLeafletPublication.Record; 65 65 + } else { 66 66 + // Not a supported collection 67 67 + return new NextResponse(null, { status: 404 }); 68 68 + } 69 69 + 70 70 + // Check if the publication has an icon 71 71 + if (!publicationRecord?.icon) { 72 72 + // Generate a placeholder with the first letter of the publication name 73 73 + const firstLetter = (publicationRecord?.name || "?") 74 74 + .slice(0, 1) 75 75 + .toUpperCase(); 76 76 + 77 77 + // Create a simple SVG placeholder with theme colors 78 78 + const svg = `<svg width="96" height="96" xmlns="http://www.w3.org/2000/svg"> 79 79 + <rect width="96" height="96" rx="48" ry="48" fill="${bgColor}"/> 80 80 + <text x="50%" y="50%" font-size="64" font-weight="bold" font-family="Arial, Helvetica, sans-serif" fill="${fgColor}" text-anchor="middle" dominant-baseline="central">${firstLetter}</text> 81 81 + </svg>`; 82 82 + 83 83 + return new NextResponse(svg, { 84 84 + headers: { 85 85 + "Content-Type": "image/svg+xml", 86 86 + "Cache-Control": 87 87 + "public, max-age=3600, s-maxage=3600, stale-while-revalidate=2592000", 88 88 + "CDN-Cache-Control": "s-maxage=3600, stale-while-revalidate=2592000", 89 89 + }, 90 90 + }); 91 91 + } 92 92 + 93 93 + // Parse the publication URI to get the DID 94 94 + const pubUri = new AtUri(publicationUri); 95 95 + 96 96 + // Get the CID from the icon blob 97 97 + const cid = (publicationRecord.icon.ref as unknown as { $link: string })[ 98 98 + "$link" 99 99 + ]; 100 100 + 101 101 + // Fetch the blob from the PDS 102 102 + const identity = await idResolver.did.resolve(pubUri.host); 103 103 + const service = identity?.service?.find((f) => f.id === "#atproto_pds"); 104 104 + if (!service) return new NextResponse(null, { status: 404 }); 105 105 + 106 106 + const blobResponse = await fetch( 107 107 + `${service.serviceEndpoint}/xrpc/com.atproto.sync.getBlob?did=${pubUri.host}&cid=${cid}`, 108 108 + { 109 109 + headers: { 110 110 + "Accept-Encoding": "gzip, deflate, br, zstd", 111 111 + }, 112 112 + }, 113 113 + ); 114 114 + 115 115 + if (!blobResponse.ok) { 116 116 + return new NextResponse(null, { status: 404 }); 117 117 + } 118 118 + 119 119 + // Get the image buffer 120 120 + const imageBuffer = await blobResponse.arrayBuffer(); 121 121 + 122 122 + // Resize to 96x96 using Sharp 123 123 + const resizedImage = await sharp(Buffer.from(imageBuffer)) 124 124 + .resize(96, 96, { 125 125 + fit: "cover", 126 126 + position: "center", 127 127 + }) 128 128 + .webp({ quality: 90 }) 129 129 + .toBuffer(); 130 130 + 131 131 + // Return with caching headers 132 132 + return new NextResponse(resizedImage, { 133 133 + headers: { 134 134 + "Content-Type": "image/webp", 135 135 + // Cache for 1 hour, but serve stale for much longer while revalidating 136 136 + "Cache-Control": 137 137 + "public, max-age=3600, s-maxage=3600, stale-while-revalidate=2592000", 138 138 + "CDN-Cache-Control": "s-maxage=3600, stale-while-revalidate=2592000", 139 139 + }, 140 140 + }); 141 141 + } catch (error) { 142 142 + console.error("Error fetching publication icon:", error); 143 143 + return new NextResponse(null, { status: 500 }); 144 144 + } 145 145 + }

+1 -1

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

··· 5 5 import type { Env } from "./route"; 6 6 import { scanIndexLocal } from "src/replicache/utils"; 7 7 import * as base64 from "base64-js"; 8 8 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 8 8 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 9 9 import { applyUpdate, Doc } from "yjs"; 10 10 11 11 export const getFactsFromHomeLeaflets = makeRoute({

+4 -2

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

··· 7 7 >; 8 8 9 9 const leaflets_in_publications_query = `leaflets_in_publications(*, publications(*), documents(*))`; 10 10 + const leaflets_to_documents_query = `leaflets_to_documents(*, documents(*))`; 10 11 export const get_leaflet_data = makeRoute({ 11 12 route: "get_leaflet_data", 12 13 input: z.object({ ··· 18 19 .from("permission_tokens") 19 20 .select( 20 21 `*, 21 21 - permission_token_rights(*, entity_sets(permission_tokens(${leaflets_in_publications_query}))), 22 22 + permission_token_rights(*, entity_sets(permission_tokens(${leaflets_in_publications_query}, ${leaflets_to_documents_query}))), 22 23 custom_domain_routes!custom_domain_routes_edit_permission_token_fkey(*), 23 23 - ${leaflets_in_publications_query}`, 24 24 + ${leaflets_in_publications_query}, 25 25 + ${leaflets_to_documents_query}`, 24 26 ) 25 27 .eq("id", token_id) 26 28 .single();

+6

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

··· 73 73 let publication_data = data.publications as { 74 74 description: string; 75 75 title: string; 76 76 + tags: string[]; 76 77 }[]; 77 78 let pub_patch = publication_data?.[0] 78 79 ? [ ··· 85 86 op: "put", 86 87 key: "publication_title", 87 88 value: publication_data[0].title, 89 89 + }, 90 90 + { 91 91 + op: "put", 92 92 + key: "publication_tags", 93 93 + value: publication_data[0].tags || [], 88 94 }, 89 95 ] 90 96 : [];

+4

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

··· 11 11 } from "./domain_routes"; 12 12 import { get_leaflet_data } from "./get_leaflet_data"; 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"; 14 16 15 17 let supabase = createClient<Database>( 16 18 process.env.NEXT_PUBLIC_SUPABASE_API_URL as string, ··· 35 37 get_leaflet_subdomain_status, 36 38 get_leaflet_data, 37 39 get_publication_data, 40 40 + search_publication_names, 41 41 + search_publication_documents, 38 42 ]; 39 43 export async function POST( 40 44 req: Request,

+52

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

··· 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { z } from "zod"; 3 3 + import { makeRoute } from "../lib"; 4 4 + import type { Env } from "./route"; 5 5 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 6 6 + 7 7 + export type SearchPublicationDocumentsReturnType = Awaited< 8 8 + ReturnType<(typeof search_publication_documents)["handler"]> 9 9 + >; 10 10 + 11 11 + export const search_publication_documents = makeRoute({ 12 12 + route: "search_publication_documents", 13 13 + input: z.object({ 14 14 + publication_uri: z.string(), 15 15 + query: z.string(), 16 16 + limit: z.number().optional().default(10), 17 17 + }), 18 18 + handler: async ( 19 19 + { publication_uri, query, limit }, 20 20 + { supabase }: Pick<Env, "supabase">, 21 21 + ) => { 22 22 + // Get documents in the publication, filtering by title using JSON operator 23 23 + // Also join with publications to get the record for URL construction 24 24 + const { data: documents, error } = await supabase 25 25 + .from("documents_in_publications") 26 26 + .select( 27 27 + "document, documents!inner(uri, data), publications!inner(uri, record)", 28 28 + ) 29 29 + .eq("publication", publication_uri) 30 30 + .ilike("documents.data->>title", `%${query}%`) 31 31 + .limit(limit); 32 32 + 33 33 + if (error) { 34 34 + throw new Error( 35 35 + `Failed to search publication documents: ${error.message}`, 36 36 + ); 37 37 + } 38 38 + 39 39 + const result = documents.map((d) => { 40 40 + const docUri = new AtUri(d.documents.uri); 41 41 + const pubUrl = getPublicationURL(d.publications); 42 42 + 43 43 + return { 44 44 + uri: d.documents.uri, 45 45 + title: (d.documents.data as { title?: string })?.title || "Untitled", 46 46 + url: `${pubUrl}/${docUri.rkey}`, 47 47 + }; 48 48 + }); 49 49 + 50 50 + return { result: { documents: result } }; 51 51 + }, 52 52 + });

+39

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

··· 1 1 + import { z } from "zod"; 2 2 + import { makeRoute } from "../lib"; 3 3 + import type { Env } from "./route"; 4 4 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 5 5 + 6 6 + export type SearchPublicationNamesReturnType = Awaited< 7 7 + ReturnType<(typeof search_publication_names)["handler"]> 8 8 + >; 9 9 + 10 10 + export const search_publication_names = makeRoute({ 11 11 + route: "search_publication_names", 12 12 + input: z.object({ 13 13 + query: z.string(), 14 14 + limit: z.number().optional().default(10), 15 15 + }), 16 16 + handler: async ({ query, limit }, { supabase }: Pick<Env, "supabase">) => { 17 17 + // Search publications by name in record (case-insensitive partial match) 18 18 + const { data: publications, error } = await supabase 19 19 + .from("publications") 20 20 + .select("uri, record") 21 21 + .ilike("record->>name", `%${query}%`) 22 22 + .limit(limit); 23 23 + 24 24 + if (error) { 25 25 + throw new Error(`Failed to search publications: ${error.message}`); 26 26 + } 27 27 + 28 28 + const result = publications.map((p) => { 29 29 + const record = p.record as { name?: string }; 30 30 + return { 31 31 + uri: p.uri, 32 32 + name: record.name || "Untitled", 33 33 + url: getPublicationURL(p), 34 34 + }; 35 35 + }); 36 36 + 37 37 + return { result: { publications: result } }; 38 38 + }, 39 39 + });

+14

app/globals.css

··· 211 211 212 212 /* END GLOBAL STYLING */ 213 213 } 214 214 + 215 215 + img { 216 216 + font-size: 0; 217 217 + } 218 218 + 214 219 button:hover { 215 220 cursor: pointer; 216 221 } ··· 291 296 @apply py-[1.5px]; 292 297 } 293 298 299 299 + /* Underline mention nodes when selected in ProseMirror */ 300 300 + .ProseMirror .atMention.ProseMirror-selectednode, 301 301 + .ProseMirror .didMention.ProseMirror-selectednode { 302 302 + text-decoration: underline; 303 303 + } 304 304 + 294 305 .ProseMirror:focus-within .selection-highlight { 295 306 background-color: transparent; 296 307 } ··· 339 350 @apply focus-within:outline-offset-1; 340 351 341 352 @apply disabled:border-border-light; 353 353 + @apply disabled:hover:border-border-light; 342 354 @apply disabled:bg-border-light; 343 355 @apply disabled:text-tertiary; 344 356 } ··· 413 425 outline: none !important; 414 426 cursor: pointer; 415 427 background-color: transparent; 428 428 + display: flex; 429 429 + gap: 0.5rem; 416 430 417 431 :hover { 418 432 text-decoration: none !important;

+36 -206

app/lish/Subscribe.tsx

··· 23 23 import { useSearchParams } from "next/navigation"; 24 24 import LoginForm from "app/login/LoginForm"; 25 25 import { RSSSmall } from "components/Icons/RSSSmall"; 26 26 - import { SpeedyLink } from "components/SpeedyLink"; 27 27 - 28 28 - type State = 29 29 - | { state: "email" } 30 30 - | { state: "code"; token: string } 31 31 - | { state: "success" }; 32 32 - export const SubscribeButton = (props: { 33 33 - compact?: boolean; 34 34 - publication: string; 35 35 - }) => { 36 36 - let { identity, mutate } = useIdentityData(); 37 37 - let [emailInputValue, setEmailInputValue] = useState(""); 38 38 - let [codeInputValue, setCodeInputValue] = useState(""); 39 39 - let [state, setState] = useState<State>({ state: "email" }); 40 40 - 41 41 - if (state.state === "email") { 42 42 - return ( 43 43 - <div className="flex gap-2"> 44 44 - <div className="flex relative w-full max-w-sm"> 45 45 - <Input 46 46 - type="email" 47 47 - className="input-with-border pr-[104px]! py-1! grow w-full" 48 48 - placeholder={ 49 49 - props.compact ? "subscribe with email..." : "email here..." 50 50 - } 51 51 - disabled={!!identity?.email} 52 52 - value={identity?.email ? identity.email : emailInputValue} 53 53 - onChange={(e) => { 54 54 - setEmailInputValue(e.currentTarget.value); 55 55 - }} 56 56 - /> 57 57 - <ButtonPrimary 58 58 - compact 59 59 - className="absolute right-1 top-1 outline-0!" 60 60 - onClick={async () => { 61 61 - if (identity?.email) { 62 62 - await subscribeToPublicationWithEmail(props.publication); 63 63 - //optimistically could add! 64 64 - await mutate(); 65 65 - return; 66 66 - } 67 67 - let tokenID = await requestAuthEmailToken(emailInputValue); 68 68 - setState({ state: "code", token: tokenID }); 69 69 - }} 70 70 - > 71 71 - {props.compact ? ( 72 72 - <ArrowRightTiny className="w-4 h-6" /> 73 73 - ) : ( 74 74 - "Subscribe" 75 75 - )} 76 76 - </ButtonPrimary> 77 77 - </div> 78 78 - {/* <ShareButton /> */} 79 79 - </div> 80 80 - ); 81 81 - } 82 82 - if (state.state === "code") { 83 83 - return ( 84 84 - <div 85 85 - className="w-full flex flex-col justify-center place-items-center p-4 rounded-md" 86 86 - style={{ 87 87 - background: 88 88 - "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)", 89 89 - }} 90 90 - > 91 91 - <div className="flex flex-col leading-snug text-secondary"> 92 92 - <div>Please enter the code we sent to </div> 93 93 - <div className="italic font-bold">{emailInputValue}</div> 94 94 - </div> 95 95 - 96 96 - <ConfirmCodeInput 97 97 - publication={props.publication} 98 98 - token={state.token} 99 99 - codeInputValue={codeInputValue} 100 100 - setCodeInputValue={setCodeInputValue} 101 101 - setState={setState} 102 102 - /> 103 103 - 104 104 - <button 105 105 - className="text-accent-contrast text-sm mt-1" 106 106 - onClick={() => { 107 107 - setState({ state: "email" }); 108 108 - }} 109 109 - > 110 110 - Re-enter Email 111 111 - </button> 112 112 - </div> 113 113 - ); 114 114 - } 115 115 - 116 116 - if (state.state === "success") { 117 117 - return ( 118 118 - <div 119 119 - className={`w-full flex flex-col gap-2 justify-center place-items-center p-4 rounded-md text-secondary ${props.compact ? "py-1 animate-bounce" : "p-4"}`} 120 120 - style={{ 121 121 - background: 122 122 - "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)", 123 123 - }} 124 124 - > 125 125 - <div className="flex gap-2 leading-snug font-bold italic"> 126 126 - <div>You're subscribed!</div> 127 127 - {/* <ShareButton /> */} 128 128 - </div> 129 129 - </div> 130 130 - ); 131 131 - } 132 132 - }; 133 133 - 134 134 - export const ShareButton = () => { 135 135 - return ( 136 136 - <button className="text-accent-contrast"> 137 137 - <ShareSmall /> 138 138 - </button> 139 139 - ); 140 140 - }; 141 141 - 142 142 - const ConfirmCodeInput = (props: { 143 143 - codeInputValue: string; 144 144 - token: string; 145 145 - setCodeInputValue: (value: string) => void; 146 146 - setState: (state: State) => void; 147 147 - publication: string; 148 148 - }) => { 149 149 - let { mutate } = useIdentityData(); 150 150 - return ( 151 151 - <div className="relative w-fit mt-2"> 152 152 - <Input 153 153 - type="text" 154 154 - pattern="[0-9]" 155 155 - className="input-with-border pr-[88px]! py-1! max-w-[156px]" 156 156 - placeholder="000000" 157 157 - value={props.codeInputValue} 158 158 - onChange={(e) => { 159 159 - props.setCodeInputValue(e.currentTarget.value); 160 160 - }} 161 161 - /> 162 162 - <ButtonPrimary 163 163 - compact 164 164 - className="absolute right-1 top-1 outline-0!" 165 165 - onClick={async () => { 166 166 - console.log( 167 167 - await confirmEmailAuthToken(props.token, props.codeInputValue), 168 168 - ); 169 169 - 170 170 - await subscribeToPublicationWithEmail(props.publication); 171 171 - //optimistically could add! 172 172 - await mutate(); 173 173 - props.setState({ state: "success" }); 174 174 - return; 175 175 - }} 176 176 - > 177 177 - Confirm 178 178 - </ButtonPrimary> 179 179 - </div> 180 180 - ); 181 181 - }; 182 26 183 27 export const SubscribeWithBluesky = (props: { 184 184 - isPost?: boolean; 185 28 pubName: string; 186 29 pub_uri: string; 187 30 base_url: string; ··· 208 51 } 209 52 return ( 210 53 <div className="flex flex-col gap-2 text-center justify-center"> 211 211 - {props.isPost && ( 212 212 - <div className="text-sm text-tertiary font-bold"> 213 213 - Get updates from {props.pubName}! 214 214 - </div> 215 215 - )} 216 54 <div className="flex flex-row gap-2 place-self-center"> 217 55 <BlueskySubscribeButton 218 56 pub_uri={props.pub_uri} ··· 231 69 ); 232 70 }; 233 71 234 234 - const ManageSubscription = (props: { 235 235 - isPost?: boolean; 236 236 - pubName: string; 72 72 + export const ManageSubscription = (props: { 237 73 pub_uri: string; 238 74 subscribers: { identity: string }[]; 239 75 base_url: string; ··· 248 84 }); 249 85 }, null); 250 86 return ( 251 251 - <div 252 252 - className={`flex ${props.isPost ? "flex-col " : "gap-2"} justify-center text-center`} 87 87 + <Popover 88 88 + trigger={ 89 89 + <div className="text-accent-contrast text-sm">Manage Subscription</div> 90 90 + } 253 91 > 254 254 - <div className="font-bold text-tertiary text-sm"> 255 255 - You&apos;re Subscribed{props.isPost ? ` to ` : "!"} 256 256 - {props.isPost && ( 257 257 - <SpeedyLink href={props.base_url} className="text-accent-contrast"> 258 258 - {props.pubName} 259 259 - </SpeedyLink> 260 260 - )} 261 261 - </div> 262 262 - <Popover 263 263 - trigger={<div className="text-accent-contrast text-sm">Manage</div>} 264 264 - > 265 265 - <div className="max-w-sm flex flex-col gap-1"> 266 266 - <h4>Update Options</h4> 92 92 + <div className="max-w-sm flex flex-col gap-1"> 93 93 + <h4>Update Options</h4> 267 94 268 268 - {!hasFeed && ( 269 269 - <a 270 270 - href="https://bsky.app/profile/leaflet.pub/feed/subscribedPublications" 271 271 - target="_blank" 272 272 - className=" place-self-center" 273 273 - > 274 274 - <ButtonPrimary fullWidth compact className="!px-4"> 275 275 - View Bluesky Custom Feed 276 276 - </ButtonPrimary> 277 277 - </a> 278 278 - )} 279 279 - 95 95 + {!hasFeed && ( 280 96 <a 281 281 - href={`${props.base_url}/rss`} 282 282 - className="flex" 97 97 + href="https://bsky.app/profile/leaflet.pub/feed/subscribedPublications" 283 98 target="_blank" 284 284 - aria-label="Subscribe to RSS" 99 99 + className=" place-self-center" 285 100 > 286 286 - <ButtonPrimary fullWidth compact> 287 287 - Get RSS 101 101 + <ButtonPrimary fullWidth compact className="!px-4"> 102 102 + View Bluesky Custom Feed 288 103 </ButtonPrimary> 289 104 </a> 105 105 + )} 290 106 291 291 - <hr className="border-border-light my-1" /> 107 107 + <a 108 108 + href={`${props.base_url}/rss`} 109 109 + className="flex" 110 110 + target="_blank" 111 111 + aria-label="Subscribe to RSS" 112 112 + > 113 113 + <ButtonPrimary fullWidth compact> 114 114 + Get RSS 115 115 + </ButtonPrimary> 116 116 + </a> 292 117 293 293 - <form action={unsubscribe}> 294 294 - <button className="font-bold text-accent-contrast w-max place-self-center"> 295 295 - {unsubscribePending ? <DotLoader /> : "Unsubscribe"} 296 296 - </button> 297 297 - </form> 298 298 - </div>{" "} 299 299 - </Popover> 300 300 - </div> 118 118 + <hr className="border-border-light my-1" /> 119 119 + 120 120 + <form action={unsubscribe}> 121 121 + <button className="font-bold text-accent-contrast w-max place-self-center"> 122 122 + {unsubscribePending ? <DotLoader /> : "Unsubscribe"} 123 123 + </button> 124 124 + </form> 125 125 + </div> 126 126 + </Popover> 301 127 ); 302 128 }; 303 129 ··· 430 256 </Dialog.Root> 431 257 ); 432 258 }; 259 259 + 260 260 + export const SubscribeOnPost = () => { 261 261 + return <div></div>; 262 262 + };

+24

app/lish/[did]/[publication]/PublicationHomeLayout.tsx

··· 1 1 + "use client"; 2 2 + 3 3 + import { usePreserveScroll } from "src/hooks/usePreserveScroll"; 4 4 + 5 5 + export function PublicationHomeLayout(props: { 6 6 + uri: string; 7 7 + showPageBackground: boolean; 8 8 + children: React.ReactNode; 9 9 + }) { 10 10 + let { ref } = usePreserveScroll<HTMLDivElement>(props.uri); 11 11 + return ( 12 12 + <div 13 13 + ref={props.showPageBackground ? null : ref} 14 14 + className={`pubWrapper flex flex-col sm:py-6 h-full ${props.showPageBackground ? "max-w-prose mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`} 15 15 + > 16 16 + <div 17 17 + ref={!props.showPageBackground ? null : ref} 18 18 + className={`pub sm:max-w-prose max-w-(--page-width-units) w-[1000px] mx-auto px-3 sm:px-4 py-5 ${props.showPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] border border-border rounded-lg" : "h-fit"}`} 19 19 + > 20 20 + {props.children} 21 21 + </div> 22 22 + </div> 23 23 + ); 24 24 + }

+39 -3

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

··· 1 1 import { UnicodeString } from "@atproto/api"; 2 2 import { PubLeafletRichtextFacet } from "lexicons/api"; 3 3 + import { didToBlueskyUrl } from "src/utils/mentionUtils"; 4 4 + import { AtMentionLink } from "components/AtMentionLink"; 3 5 4 6 type Facet = PubLeafletRichtextFacet.Main; 5 7 export function BaseTextBlock(props: { ··· 22 24 let isStrikethrough = segment.facet?.find( 23 25 PubLeafletRichtextFacet.isStrikethrough, 24 26 ); 27 27 + let isDidMention = segment.facet?.find( 28 28 + PubLeafletRichtextFacet.isDidMention, 29 29 + ); 30 30 + let isAtMention = segment.facet?.find( 31 31 + PubLeafletRichtextFacet.isAtMention, 32 32 + ); 25 33 let isUnderline = segment.facet?.find(PubLeafletRichtextFacet.isUnderline); 26 34 let isItalic = segment.facet?.find(PubLeafletRichtextFacet.isItalic); 27 35 let isHighlighted = segment.facet?.find( ··· 36 44 ${isStrikethrough ? "line-through decoration-tertiary" : ""} 37 45 ${isHighlighted ? "highlight bg-highlight-1" : ""}`.replaceAll("\n", " "); 38 46 47 47 + // Split text by newlines and insert <br> tags 48 48 + const textParts = segment.text.split('\n'); 49 49 + const renderedText = textParts.flatMap((part, i) => 50 50 + i < textParts.length - 1 ? [part, <br key={`br-${counter}-${i}`} />] : [part] 51 51 + ); 52 52 + 39 53 if (isCode) { 40 54 children.push( 41 55 <code key={counter} className={className} id={id?.id}> 42 42 - {segment.text} 56 56 + {renderedText} 43 57 </code>, 44 58 ); 59 59 + } else if (isDidMention) { 60 60 + children.push( 61 61 + <a 62 62 + key={counter} 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>, 70 70 + ); 71 71 + } else if (isAtMention) { 72 72 + children.push( 73 73 + <AtMentionLink 74 74 + key={counter} 75 75 + atURI={isAtMention.atURI} 76 76 + className={className} 77 77 + > 78 78 + {renderedText} 79 79 + </AtMentionLink>, 80 80 + ); 45 81 } else if (link) { 46 82 children.push( 47 83 <a ··· 50 86 className={`text-accent-contrast hover:underline ${className}`} 51 87 target="_blank" 52 88 > 53 53 - {segment.text} 89 89 + {renderedText} 54 90 </a>, 55 91 ); 56 92 } else { 57 93 children.push( 58 94 <span key={counter} className={className} id={id?.id}> 59 59 - {segment.text} 95 95 + {renderedText} 60 96 </span>, 61 97 ); 62 98 }

+25 -31

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

··· 21 21 import { PostHeader } from "./PostHeader/PostHeader"; 22 22 import { useDrawerOpen } from "./Interactions/InteractionDrawer"; 23 23 import { PollData } from "./fetchPollData"; 24 24 + import { SharedPageProps } from "./PostPages"; 25 25 + import { useIsMobile } from "src/hooks/isMobile"; 24 26 25 27 export function CanvasPage({ 26 26 - document, 27 28 blocks, 28 28 - did, 29 29 - profile, 30 30 - preferences, 31 31 - pubRecord, 32 32 - prerenderedCodeBlocks, 33 33 - bskyPostData, 34 34 - pollData, 35 35 - document_uri, 36 36 - pageId, 37 37 - pageOptions, 38 38 - fullPageScroll, 39 29 pages, 40 40 - }: { 41 41 - document_uri: string; 42 42 - document: PostPageData; 30 30 + ...props 31 31 + }: Omit<SharedPageProps, "allPages"> & { 43 32 blocks: PubLeafletPagesCanvas.Block[]; 44 44 - profile: ProfileViewDetailed; 45 45 - pubRecord: PubLeafletPublication.Record; 46 46 - did: string; 47 47 - prerenderedCodeBlocks?: Map<string, string>; 48 48 - bskyPostData: AppBskyFeedDefs.PostView[]; 49 49 - pollData: PollData[]; 50 50 - preferences: { showComments?: boolean }; 51 51 - pageId?: string; 52 52 - pageOptions?: React.ReactNode; 53 53 - fullPageScroll: boolean; 54 33 pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[]; 55 34 }) { 35 35 + const { 36 36 + document, 37 37 + did, 38 38 + profile, 39 39 + preferences, 40 40 + pubRecord, 41 41 + theme, 42 42 + prerenderedCodeBlocks, 43 43 + bskyPostData, 44 44 + pollData, 45 45 + document_uri, 46 46 + pageId, 47 47 + pageOptions, 48 48 + fullPageScroll, 49 49 + hasPageBackground, 50 50 + } = props; 56 51 if (!document) return null; 57 52 58 58 - let hasPageBackground = !!pubRecord.theme?.showPageBackground; 59 53 let isSubpage = !!pageId; 60 54 let drawer = useDrawerOpen(document_uri); 61 55 ··· 213 207 quotesCount: number | undefined; 214 208 commentsCount: number | undefined; 215 209 }) => { 210 210 + let isMobile = useIsMobile(); 216 211 return ( 217 217 - <div className="flex flex-row gap-3 items-center absolute top-6 right-3 sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20"> 212 212 + <div className="flex flex-row gap-3 items-center absolute top-3 right-3 sm:top-4 sm:right-4 bg-bg-page border-border-light rounded-md px-2 py-1 h-fit z-20"> 218 213 <Interactions 219 214 quotesCount={props.quotesCount || 0} 220 215 commentsCount={props.commentsCount || 0} 221 221 - compact 222 216 showComments={props.preferences.showComments} 223 217 pageId={props.pageId} 224 218 /> ··· 226 220 <> 227 221 <Separator classname="h-5" /> 228 222 <Popover 229 229 - side="left" 230 230 - align="start" 231 231 - className="flex flex-col gap-2 p-0! max-w-sm w-[1000px]" 223 223 + side="bottom" 224 224 + align="end" 225 225 + className={`flex flex-col gap-2 p-0! text-primary ${isMobile ? "w-full" : "max-w-sm w-[1000px] t"}`} 232 226 trigger={<InfoSmall />} 233 227 > 234 228 <PostHeader

+146

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

··· 1 1 + import { AtpAgent } from "@atproto/api"; 2 2 + import { AtUri } from "@atproto/syntax"; 3 3 + import { ids } from "lexicons/api/lexicons"; 4 4 + import { 5 5 + PubLeafletBlocksBskyPost, 6 6 + PubLeafletDocument, 7 7 + PubLeafletPagesLinearDocument, 8 8 + PubLeafletPagesCanvas, 9 9 + PubLeafletPublication, 10 10 + } from "lexicons/api"; 11 11 + import { QuoteHandler } from "./QuoteHandler"; 12 12 + import { 13 13 + PublicationBackgroundProvider, 14 14 + PublicationThemeProvider, 15 15 + } from "components/ThemeManager/PublicationThemeProvider"; 16 16 + import { getPostPageData } from "./getPostPageData"; 17 17 + import { PostPageContextProvider } from "./PostPageContext"; 18 18 + import { PostPages } from "./PostPages"; 19 19 + import { extractCodeBlocks } from "./extractCodeBlocks"; 20 20 + import { LeafletLayout } from "components/LeafletLayout"; 21 21 + import { fetchPollData } from "./fetchPollData"; 22 22 + 23 23 + export async function DocumentPageRenderer({ 24 24 + did, 25 25 + rkey, 26 26 + }: { 27 27 + did: string; 28 28 + rkey: string; 29 29 + }) { 30 30 + let agent = new AtpAgent({ 31 31 + service: "https://public.api.bsky.app", 32 32 + fetch: (...args) => 33 33 + fetch(args[0], { 34 34 + ...args[1], 35 35 + next: { revalidate: 3600 }, 36 36 + }), 37 37 + }); 38 38 + 39 39 + let [document, profile] = await Promise.all([ 40 40 + getPostPageData(AtUri.make(did, ids.PubLeafletDocument, rkey).toString()), 41 41 + agent.getProfile({ actor: did }), 42 42 + ]); 43 43 + 44 44 + if (!document?.data) 45 45 + return ( 46 46 + <div className="bg-bg-leaflet h-full p-3 text-center relative"> 47 47 + <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-md w-full"> 48 48 + <div className=" px-3 py-4 opaque-container flex flex-col gap-1 mx-2 "> 49 49 + <h3>Sorry, post not found!</h3> 50 50 + <p> 51 51 + This may be a glitch on our end. If the issue persists please{" "} 52 52 + <a href="mailto:contact@leaflet.pub">send us a note</a>. 53 53 + </p> 54 54 + </div> 55 55 + </div> 56 56 + </div> 57 57 + ); 58 58 + 59 59 + let record = document.data as PubLeafletDocument.Record; 60 60 + let bskyPosts = 61 61 + record.pages.flatMap((p) => { 62 62 + let page = p as PubLeafletPagesLinearDocument.Main; 63 63 + return page.blocks?.filter( 64 64 + (b) => b.block.$type === ids.PubLeafletBlocksBskyPost, 65 65 + ); 66 66 + }) || []; 67 67 + 68 68 + // Batch bsky posts into groups of 25 and fetch in parallel 69 69 + let bskyPostBatches = []; 70 70 + for (let i = 0; i < bskyPosts.length; i += 25) { 71 71 + bskyPostBatches.push(bskyPosts.slice(i, i + 25)); 72 72 + } 73 73 + 74 74 + let bskyPostResponses = await Promise.all( 75 75 + bskyPostBatches.map((batch) => 76 76 + agent.getPosts( 77 77 + { 78 78 + uris: batch.map((p) => { 79 79 + let block = p?.block as PubLeafletBlocksBskyPost.Main; 80 80 + return block.postRef.uri; 81 81 + }), 82 82 + }, 83 83 + { headers: {} }, 84 84 + ), 85 85 + ), 86 86 + ); 87 87 + 88 88 + let bskyPostData = 89 89 + bskyPostResponses.length > 0 90 90 + ? bskyPostResponses.flatMap((response) => response.data.posts) 91 91 + : []; 92 92 + 93 93 + // Extract poll blocks and fetch vote data 94 94 + let pollBlocks = record.pages.flatMap((p) => { 95 95 + let page = p as PubLeafletPagesLinearDocument.Main; 96 96 + return ( 97 97 + page.blocks?.filter((b) => b.block.$type === ids.PubLeafletBlocksPoll) || 98 98 + [] 99 99 + ); 100 100 + }); 101 101 + let pollData = await fetchPollData( 102 102 + pollBlocks.map((b) => (b.block as any).pollRef.uri), 103 103 + ); 104 104 + 105 105 + // Get theme from publication or document (for standalone docs) 106 106 + let pubRecord = document.documents_in_publications[0]?.publications 107 107 + ?.record as PubLeafletPublication.Record | undefined; 108 108 + let theme = pubRecord?.theme || record.theme || null; 109 109 + let pub_creator = 110 110 + document.documents_in_publications[0]?.publications?.identity_did || did; 111 111 + let isStandalone = !pubRecord; 112 112 + 113 113 + let firstPage = record.pages[0]; 114 114 + 115 115 + let firstPageBlocks = 116 116 + ( 117 117 + firstPage as 118 118 + | PubLeafletPagesLinearDocument.Main 119 119 + | PubLeafletPagesCanvas.Main 120 120 + ).blocks || []; 121 121 + let prerenderedCodeBlocks = await extractCodeBlocks(firstPageBlocks); 122 122 + 123 123 + return ( 124 124 + <PostPageContextProvider value={document}> 125 125 + <PublicationThemeProvider theme={theme} pub_creator={pub_creator} isStandalone={isStandalone}> 126 126 + <PublicationBackgroundProvider theme={theme} pub_creator={pub_creator}> 127 127 + <LeafletLayout> 128 128 + <PostPages 129 129 + document_uri={document.uri} 130 130 + preferences={pubRecord?.preferences || {}} 131 131 + pubRecord={pubRecord} 132 132 + profile={JSON.parse(JSON.stringify(profile.data))} 133 133 + document={document} 134 134 + bskyPostData={bskyPostData} 135 135 + did={did} 136 136 + prerenderedCodeBlocks={prerenderedCodeBlocks} 137 137 + pollData={pollData} 138 138 + /> 139 139 + </LeafletLayout> 140 140 + 141 141 + <QuoteHandler /> 142 142 + </PublicationBackgroundProvider> 143 143 + </PublicationThemeProvider> 144 144 + </PostPageContextProvider> 145 145 + ); 146 146 + }

+223 -11

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

··· 8 8 import { EditorState, TextSelection } from "prosemirror-state"; 9 9 import { EditorView } from "prosemirror-view"; 10 10 import { history, redo, undo } from "prosemirror-history"; 11 11 + import { InputRule, inputRules } from "prosemirror-inputrules"; 11 12 import { 12 13 MutableRefObject, 13 14 RefObject, 15 15 + useCallback, 14 16 useEffect, 15 17 useLayoutEffect, 16 18 useRef, ··· 36 38 import { CloseTiny } from "components/Icons/CloseTiny"; 37 39 import { CloseFillTiny } from "components/Icons/CloseFillTiny"; 38 40 import { betterIsUrl } from "src/utils/isURL"; 41 41 + import { Mention, MentionAutocomplete } from "components/Mention"; 42 42 + import { didToBlueskyUrl, atUriToUrl } from "src/utils/mentionUtils"; 43 43 + 44 44 + const addMentionToEditor = ( 45 45 + mention: Mention, 46 46 + range: { from: number; to: number }, 47 47 + view: EditorView, 48 48 + ) => { 49 49 + if (!view) return; 50 50 + const { from, to } = range; 51 51 + const tr = view.state.tr; 52 52 + 53 53 + if (mention.type === "did") { 54 54 + // Delete the @ and any query text 55 55 + tr.delete(from, to); 56 56 + // Insert didMention inline node 57 57 + const mentionText = "@" + mention.handle; 58 58 + const didMentionNode = multiBlockSchema.nodes.didMention.create({ 59 59 + did: mention.did, 60 60 + text: mentionText, 61 61 + }); 62 62 + tr.insert(from, didMentionNode); 63 63 + // Add a space after the mention 64 64 + tr.insertText(" ", from + 1); 65 65 + } 66 66 + if (mention.type === "publication" || mention.type === "post") { 67 67 + // Delete the @ and any query text 68 68 + tr.delete(from, to); 69 69 + let name = mention.type === "post" ? mention.title : mention.name; 70 70 + // Insert atMention inline node 71 71 + const atMentionNode = multiBlockSchema.nodes.atMention.create({ 72 72 + atURI: mention.uri, 73 73 + text: name, 74 74 + }); 75 75 + tr.insert(from, atMentionNode); 76 76 + // Add a space after the mention 77 77 + tr.insertText(" ", from + 1); 78 78 + } 79 79 + 80 80 + view.dispatch(tr); 81 81 + view.focus(); 82 82 + }; 39 83 40 84 export function CommentBox(props: { 41 85 doc_uri: string; ··· 50 94 commentBox: { quote }, 51 95 } = useInteractionState(props.doc_uri); 52 96 let [loading, setLoading] = useState(false); 97 97 + let view = useRef<null | EditorView>(null); 98 98 + 99 99 + // Mention autocomplete state 100 100 + const [mentionOpen, setMentionOpen] = useState(false); 101 101 + const [mentionCoords, setMentionCoords] = useState<{ 102 102 + top: number; 103 103 + left: number; 104 104 + } | null>(null); 105 105 + // Use a ref for insert position to avoid stale closure issues 106 106 + const mentionInsertPosRef = useRef<number | null>(null); 107 107 + 108 108 + // Use a ref for the callback so input rules can access it 109 109 + const openMentionAutocompleteRef = useRef<() => void>(() => {}); 110 110 + openMentionAutocompleteRef.current = () => { 111 111 + if (!view.current) return; 53 112 54 54 - const handleSubmit = async () => { 113 113 + const pos = view.current.state.selection.from; 114 114 + mentionInsertPosRef.current = pos; 115 115 + 116 116 + // Get coordinates for the popup relative to the positioned parent 117 117 + const coords = view.current.coordsAtPos(pos - 1); 118 118 + 119 119 + // Find the relative positioned parent container 120 120 + const editorEl = view.current.dom; 121 121 + const container = editorEl.closest(".relative") as HTMLElement | null; 122 122 + 123 123 + if (container) { 124 124 + const containerRect = container.getBoundingClientRect(); 125 125 + setMentionCoords({ 126 126 + top: coords.bottom - containerRect.top, 127 127 + left: coords.left - containerRect.left, 128 128 + }); 129 129 + } else { 130 130 + setMentionCoords({ 131 131 + top: coords.bottom, 132 132 + left: coords.left, 133 133 + }); 134 134 + } 135 135 + setMentionOpen(true); 136 136 + }; 137 137 + 138 138 + const handleMentionSelect = useCallback((mention: Mention) => { 139 139 + if (!view.current || mentionInsertPosRef.current === null) return; 140 140 + 141 141 + const from = mentionInsertPosRef.current - 1; 142 142 + const to = mentionInsertPosRef.current; 143 143 + 144 144 + addMentionToEditor(mention, { from, to }, view.current); 145 145 + view.current.focus(); 146 146 + }, []); 147 147 + 148 148 + const handleMentionOpenChange = useCallback((open: boolean) => { 149 149 + setMentionOpen(open); 150 150 + if (!open) { 151 151 + setMentionCoords(null); 152 152 + mentionInsertPosRef.current = null; 153 153 + } 154 154 + }, []); 155 155 + 156 156 + // Use a ref for handleSubmit so keyboard shortcuts can access it 157 157 + const handleSubmitRef = useRef<() => Promise<void>>(async () => {}); 158 158 + handleSubmitRef.current = async () => { 55 159 if (loading || !view.current) return; 56 160 57 161 setLoading(true); ··· 114 218 "Mod-y": redo, 115 219 "Shift-Mod-z": redo, 116 220 "Ctrl-Enter": () => { 117 117 - handleSubmit(); 221 221 + handleSubmitRef.current(); 118 222 return true; 119 223 }, 120 224 "Meta-Enter": () => { 121 121 - handleSubmit(); 225 225 + handleSubmitRef.current(); 122 226 return true; 123 227 }, 124 228 }), ··· 128 232 shouldAutoLink: () => true, 129 233 defaultProtocol: "https", 130 234 }), 235 235 + // Input rules for @ mentions 236 236 + inputRules({ 237 237 + rules: [ 238 238 + // @ at start of line or after space 239 239 + new InputRule(/(?:^|\s)@$/, (state, match, start, end) => { 240 240 + setTimeout(() => openMentionAutocompleteRef.current(), 0); 241 241 + return null; 242 242 + }), 243 243 + ], 244 244 + }), 131 245 history(), 132 246 ], 133 247 }), 134 248 ); 135 135 - let view = useRef<null | EditorView>(null); 136 249 useLayoutEffect(() => { 137 250 if (!mountRef.current) return; 138 251 view.current = new EditorView( ··· 187 300 handleClickOn: (view, _pos, node, _nodePos, _event, direct) => { 188 301 if (!direct) return; 189 302 if (node.nodeSize - 2 <= _pos) return; 303 303 + 304 304 + const nodeAt1 = node.nodeAt(_pos - 1); 305 305 + const nodeAt2 = node.nodeAt(Math.max(_pos - 2, 0)); 306 306 + 307 307 + // Check for link marks 190 308 let mark = 191 191 - node 192 192 - .nodeAt(_pos - 1) 193 193 - ?.marks.find((f) => f.type === multiBlockSchema.marks.link) || 194 194 - node 195 195 - .nodeAt(Math.max(_pos - 2, 0)) 196 196 - ?.marks.find((f) => f.type === multiBlockSchema.marks.link); 309 309 + nodeAt1?.marks.find( 310 310 + (f) => f.type === multiBlockSchema.marks.link, 311 311 + ) || 312 312 + nodeAt2?.marks.find((f) => f.type === multiBlockSchema.marks.link); 197 313 if (mark) { 198 314 window.open(mark.attrs.href, "_blank"); 315 315 + return; 316 316 + } 317 317 + 318 318 + // Check for didMention inline nodes 319 319 + if (nodeAt1?.type === multiBlockSchema.nodes.didMention) { 320 320 + window.open( 321 321 + didToBlueskyUrl(nodeAt1.attrs.did), 322 322 + "_blank", 323 323 + "noopener,noreferrer", 324 324 + ); 325 325 + return; 326 326 + } 327 327 + if (nodeAt2?.type === multiBlockSchema.nodes.didMention) { 328 328 + window.open( 329 329 + didToBlueskyUrl(nodeAt2.attrs.did), 330 330 + "_blank", 331 331 + "noopener,noreferrer", 332 332 + ); 333 333 + return; 334 334 + } 335 335 + 336 336 + // Check for atMention inline nodes (publications/documents) 337 337 + if (nodeAt1?.type === multiBlockSchema.nodes.atMention) { 338 338 + window.open( 339 339 + atUriToUrl(nodeAt1.attrs.atURI), 340 340 + "_blank", 341 341 + "noopener,noreferrer", 342 342 + ); 343 343 + return; 344 344 + } 345 345 + if (nodeAt2?.type === multiBlockSchema.nodes.atMention) { 346 346 + window.open( 347 347 + atUriToUrl(nodeAt2.attrs.atURI), 348 348 + "_blank", 349 349 + "noopener,noreferrer", 350 350 + ); 351 351 + return; 199 352 } 200 353 }, 201 354 dispatchTransaction(tr) { ··· 236 389 <div className="w-full relative group"> 237 390 <pre 238 391 ref={mountRef} 392 392 + onFocus={() => { 393 393 + // Close mention dropdown when editor gains focus (reset stale state) 394 394 + handleMentionOpenChange(false); 395 395 + }} 396 396 + onBlur={(e) => { 397 397 + // Close mention dropdown when editor loses focus 398 398 + // But not if focus moved to the mention autocomplete 399 399 + const relatedTarget = e.relatedTarget as HTMLElement | null; 400 400 + if (!relatedTarget?.closest(".dropdownMenu")) { 401 401 + handleMentionOpenChange(false); 402 402 + } 403 403 + }} 239 404 className={`border whitespace-pre-wrap input-with-border min-h-32 h-fit px-2! py-[6px]!`} 240 405 /> 241 406 <IOSBS view={view} /> 407 407 + <MentionAutocomplete 408 408 + open={mentionOpen} 409 409 + onOpenChange={handleMentionOpenChange} 410 410 + view={view} 411 411 + onSelect={handleMentionSelect} 412 412 + coords={mentionCoords} 413 413 + /> 242 414 </div> 243 415 <div className="flex justify-between pt-1"> 244 416 <div className="flex gap-1"> ··· 261 433 view={view} 262 434 /> 263 435 </div> 264 264 - <ButtonPrimary compact onClick={handleSubmit}> 436 436 + <ButtonPrimary compact onClick={() => handleSubmitRef.current()}> 265 437 {loading ? <DotLoader /> : <ShareSmall />} 266 438 </ButtonPrimary> 267 439 </div> ··· 328 500 facets.push(facet); 329 501 } 330 502 } 503 503 + 504 504 + fullText += text; 505 505 + byteOffset += unicodeString.length; 506 506 + } else if (node.type.name === "didMention") { 507 507 + // Handle DID mention nodes 508 508 + const text = node.attrs.text || ""; 509 509 + const unicodeString = new UnicodeString(text); 510 510 + 511 511 + facets.push({ 512 512 + index: { 513 513 + byteStart: byteOffset, 514 514 + byteEnd: byteOffset + unicodeString.length, 515 515 + }, 516 516 + features: [ 517 517 + { 518 518 + $type: "pub.leaflet.richtext.facet#didMention", 519 519 + did: node.attrs.did, 520 520 + }, 521 521 + ], 522 522 + }); 523 523 + 524 524 + fullText += text; 525 525 + byteOffset += unicodeString.length; 526 526 + } else if (node.type.name === "atMention") { 527 527 + // Handle AT-URI mention nodes (publications and documents) 528 528 + const text = node.attrs.text || ""; 529 529 + const unicodeString = new UnicodeString(text); 530 530 + 531 531 + facets.push({ 532 532 + index: { 533 533 + byteStart: byteOffset, 534 534 + byteEnd: byteOffset + unicodeString.length, 535 535 + }, 536 536 + features: [ 537 537 + { 538 538 + $type: "pub.leaflet.richtext.facet#atMention", 539 539 + atURI: node.attrs.atURI, 540 540 + }, 541 541 + ], 542 542 + }); 331 543 332 544 fullText += text; 333 545 byteOffset += unicodeString.length;

+98 -1

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/commentAction.ts

··· 10 10 import { Json } from "supabase/database.types"; 11 11 import { 12 12 Notification, 13 13 + NotificationData, 13 14 pingIdentityToUpdateNotification, 14 15 } from "src/notifications"; 15 16 import { v7 } from "uuid"; ··· 84 85 parent_uri: args.comment.replyTo, 85 86 }, 86 87 }); 88 88 + } 89 89 + 90 90 + // Create mention notifications from comment facets 91 91 + const mentionNotifications = createCommentMentionNotifications( 92 92 + args.comment.facets, 93 93 + uri.toString(), 94 94 + credentialSession.did!, 95 95 + ); 96 96 + notifications.push(...mentionNotifications); 97 97 + 98 98 + // Insert all notifications and ping recipients 99 99 + if (notifications.length > 0) { 87 100 // SOMEDAY: move this out the action with inngest or workflows 88 101 await supabaseServerClient.from("notifications").insert(notifications); 89 89 - await pingIdentityToUpdateNotification(recipient); 102 102 + 103 103 + // Ping all unique recipients 104 104 + const uniqueRecipients = [...new Set(notifications.map((n) => n.recipient))]; 105 105 + await Promise.all( 106 106 + uniqueRecipients.map((r) => pingIdentityToUpdateNotification(r)), 107 107 + ); 90 108 } 91 109 92 110 return { ··· 95 113 uri: uri.toString(), 96 114 }; 97 115 } 116 116 + 117 117 + /** 118 118 + * Creates mention notifications from comment facets 119 119 + * Handles didMention (people) and atMention (publications/documents) 120 120 + */ 121 121 + function createCommentMentionNotifications( 122 122 + facets: PubLeafletRichtextFacet.Main[], 123 123 + commentUri: string, 124 124 + commenterDid: string, 125 125 + ): Notification[] { 126 126 + const notifications: Notification[] = []; 127 127 + const notifiedRecipients = new Set<string>(); // Avoid duplicate notifications 128 128 + 129 129 + for (const facet of facets) { 130 130 + for (const feature of facet.features) { 131 131 + if (PubLeafletRichtextFacet.isDidMention(feature)) { 132 132 + // DID mention - notify the mentioned person directly 133 133 + const recipientDid = feature.did; 134 134 + 135 135 + // Don't notify yourself 136 136 + if (recipientDid === commenterDid) continue; 137 137 + // Avoid duplicate notifications to the same person 138 138 + if (notifiedRecipients.has(recipientDid)) continue; 139 139 + notifiedRecipients.add(recipientDid); 140 140 + 141 141 + notifications.push({ 142 142 + id: v7(), 143 143 + recipient: recipientDid, 144 144 + data: { 145 145 + type: "comment_mention", 146 146 + comment_uri: commentUri, 147 147 + mention_type: "did", 148 148 + }, 149 149 + }); 150 150 + } else if (PubLeafletRichtextFacet.isAtMention(feature)) { 151 151 + // AT-URI mention - notify the owner of the publication/document 152 152 + try { 153 153 + const mentionedUri = new AtUri(feature.atURI); 154 154 + const recipientDid = mentionedUri.host; 155 155 + 156 156 + // Don't notify yourself 157 157 + if (recipientDid === commenterDid) continue; 158 158 + // Avoid duplicate notifications to the same person for the same mentioned item 159 159 + const dedupeKey = `${recipientDid}:${feature.atURI}`; 160 160 + if (notifiedRecipients.has(dedupeKey)) continue; 161 161 + notifiedRecipients.add(dedupeKey); 162 162 + 163 163 + if (mentionedUri.collection === "pub.leaflet.publication") { 164 164 + notifications.push({ 165 165 + id: v7(), 166 166 + recipient: recipientDid, 167 167 + data: { 168 168 + type: "comment_mention", 169 169 + comment_uri: commentUri, 170 170 + mention_type: "publication", 171 171 + mentioned_uri: feature.atURI, 172 172 + }, 173 173 + }); 174 174 + } else if (mentionedUri.collection === "pub.leaflet.document") { 175 175 + notifications.push({ 176 176 + id: v7(), 177 177 + recipient: recipientDid, 178 178 + data: { 179 179 + type: "comment_mention", 180 180 + comment_uri: commentUri, 181 181 + mention_type: "document", 182 182 + mentioned_uri: feature.atURI, 183 183 + }, 184 184 + }); 185 185 + } 186 186 + } catch (error) { 187 187 + console.error("Failed to parse AT-URI for mention:", feature.atURI, error); 188 188 + } 189 189 + } 190 190 + } 191 191 + } 192 192 + 193 193 + return notifications; 194 194 + }

+208 -30

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

··· 9 9 import { useContext } from "react"; 10 10 import { PostPageContext } from "../PostPageContext"; 11 11 import { scrollIntoView } from "src/utils/scrollIntoView"; 12 12 + import { TagTiny } from "components/Icons/TagTiny"; 13 13 + import { Tag } from "components/Tags"; 14 14 + import { Popover } from "components/Popover"; 12 15 import { PostPageData } from "../getPostPageData"; 13 13 - import { PubLeafletComment } from "lexicons/api"; 16 16 + import { PubLeafletComment, PubLeafletPublication } from "lexicons/api"; 14 17 import { prefetchQuotesData } from "./Quotes"; 18 18 + import { useIdentityData } from "components/IdentityProvider"; 19 19 + import { ManageSubscription, SubscribeWithBluesky } from "app/lish/Subscribe"; 20 20 + import { EditTiny } from "components/Icons/EditTiny"; 21 21 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 15 22 16 23 export type InteractionState = { 17 24 drawerOpen: undefined | boolean; ··· 99 106 export const Interactions = (props: { 100 107 quotesCount: number; 101 108 commentsCount: number; 102 102 - compact?: boolean; 103 109 className?: string; 104 110 showComments?: boolean; 105 111 pageId?: string; 106 112 }) => { 107 113 const data = useContext(PostPageContext); 108 114 const document_uri = data?.uri; 115 115 + let { identity } = useIdentityData(); 109 116 if (!document_uri) 110 117 throw new Error("document_uri not available in PostPageContext"); 111 118 ··· 117 124 } 118 125 }; 119 126 127 127 + const tags = (data?.data as any)?.tags as string[] | undefined; 128 128 + const tagCount = tags?.length || 0; 129 129 + 120 130 return ( 121 121 - <div 122 122 - className={`flex gap-2 text-tertiary ${props.compact ? "text-sm" : "px-3 sm:px-4"} ${props.className}`} 123 123 - > 124 124 - <button 125 125 - className={`flex gap-1 items-center ${!props.compact && "px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"}`} 126 126 - onClick={() => { 127 127 - if (!drawerOpen || drawer !== "quotes") 128 128 - openInteractionDrawer("quotes", document_uri, props.pageId); 129 129 - else setInteractionState(document_uri, { drawerOpen: false }); 130 130 - }} 131 131 - onMouseEnter={handleQuotePrefetch} 132 132 - onTouchStart={handleQuotePrefetch} 133 133 - aria-label="Post quotes" 134 134 - > 135 135 - <QuoteTiny aria-hidden /> {props.quotesCount}{" "} 136 136 - {!props.compact && ( 137 137 - <span 138 138 - aria-hidden 139 139 - >{`Quote${props.quotesCount === 1 ? "" : "s"}`}</span> 140 140 - )} 141 141 - </button> 131 131 + <div className={`flex gap-2 text-tertiary text-sm ${props.className}`}> 132 132 + {tagCount > 0 && <TagPopover tags={tags} tagCount={tagCount} />} 133 133 + 134 134 + {props.quotesCount > 0 && ( 135 135 + <button 136 136 + className="flex w-fit gap-2 items-center" 137 137 + onClick={() => { 138 138 + if (!drawerOpen || drawer !== "quotes") 139 139 + openInteractionDrawer("quotes", document_uri, props.pageId); 140 140 + else setInteractionState(document_uri, { drawerOpen: false }); 141 141 + }} 142 142 + onMouseEnter={handleQuotePrefetch} 143 143 + onTouchStart={handleQuotePrefetch} 144 144 + aria-label="Post quotes" 145 145 + > 146 146 + <QuoteTiny aria-hidden /> {props.quotesCount} 147 147 + </button> 148 148 + )} 142 149 {props.showComments === false ? null : ( 143 150 <button 144 144 - className={`flex gap-1 items-center ${!props.compact && "px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"}`} 151 151 + className="flex gap-2 items-center w-fit" 145 152 onClick={() => { 146 153 if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId) 147 154 openInteractionDrawer("comments", document_uri, props.pageId); ··· 149 156 }} 150 157 aria-label="Post comments" 151 158 > 152 152 - <CommentTiny aria-hidden /> {props.commentsCount}{" "} 153 153 - {!props.compact && ( 154 154 - <span 155 155 - aria-hidden 156 156 - >{`Comment${props.commentsCount === 1 ? "" : "s"}`}</span> 157 157 - )} 159 159 + <CommentTiny aria-hidden /> {props.commentsCount} 158 160 </button> 159 161 )} 160 162 </div> 161 163 ); 162 164 }; 163 165 166 166 + export const ExpandedInteractions = (props: { 167 167 + quotesCount: number; 168 168 + commentsCount: number; 169 169 + className?: string; 170 170 + showComments?: boolean; 171 171 + pageId?: string; 172 172 + }) => { 173 173 + const data = useContext(PostPageContext); 174 174 + let { identity } = useIdentityData(); 175 175 + 176 176 + const document_uri = data?.uri; 177 177 + if (!document_uri) 178 178 + throw new Error("document_uri not available in PostPageContext"); 179 179 + 180 180 + let { drawerOpen, drawer, pageId } = useInteractionState(document_uri); 181 181 + 182 182 + const handleQuotePrefetch = () => { 183 183 + if (data?.quotesAndMentions) { 184 184 + prefetchQuotesData(data.quotesAndMentions); 185 185 + } 186 186 + }; 187 187 + let publication = data?.documents_in_publications[0]?.publications; 188 188 + 189 189 + const tags = (data?.data as any)?.tags as string[] | undefined; 190 190 + const tagCount = tags?.length || 0; 191 191 + 192 192 + let subscribed = 193 193 + identity?.atp_did && 194 194 + publication?.publication_subscriptions && 195 195 + publication?.publication_subscriptions.find( 196 196 + (s) => s.identity === identity.atp_did, 197 197 + ); 198 198 + 199 199 + let isAuthor = 200 200 + identity && 201 201 + identity.atp_did === 202 202 + data.documents_in_publications[0]?.publications?.identity_did && 203 203 + data.leaflets_in_publications[0]; 204 204 + 205 205 + return ( 206 206 + <div 207 207 + className={`text-tertiary px-3 sm:px-4 flex flex-col ${props.className}`} 208 208 + > 209 209 + {!subscribed && !isAuthor && publication && publication.record && ( 210 210 + <div className="text-center flex flex-col accent-container rounded-md mb-3"> 211 211 + <div className="flex flex-col py-4"> 212 212 + <div className="leading-snug flex flex-col pb-2 text-sm"> 213 213 + <div className="font-bold">Subscribe to {publication.name}</div>{" "} 214 214 + to get updates in Reader, RSS, or via Bluesky Feed 215 215 + </div> 216 216 + <SubscribeWithBluesky 217 217 + pubName={publication.name} 218 218 + pub_uri={publication.uri} 219 219 + base_url={ 220 220 + (publication.record as PubLeafletPublication.Record) 221 221 + .base_path || "" 222 222 + } 223 223 + subscribers={publication?.publication_subscriptions} 224 224 + /> 225 225 + </div> 226 226 + </div> 227 227 + )} 228 228 + {tagCount > 0 && ( 229 229 + <> 230 230 + <hr className="border-border-light mb-3" /> 231 231 + 232 232 + <TagList tags={tags} className="mb-3" /> 233 233 + </> 234 234 + )} 235 235 + <hr className="border-border-light mb-3 " /> 236 236 + <div className="flex gap-2 justify-between"> 237 237 + <div className="flex gap-2"> 238 238 + {props.quotesCount > 0 && ( 239 239 + <button 240 240 + className="flex w-fit gap-2 items-center px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline" 241 241 + onClick={() => { 242 242 + if (!drawerOpen || drawer !== "quotes") 243 243 + openInteractionDrawer("quotes", document_uri, props.pageId); 244 244 + else setInteractionState(document_uri, { drawerOpen: false }); 245 245 + }} 246 246 + onMouseEnter={handleQuotePrefetch} 247 247 + onTouchStart={handleQuotePrefetch} 248 248 + aria-label="Post quotes" 249 249 + > 250 250 + <QuoteTiny aria-hidden /> {props.quotesCount}{" "} 251 251 + <span 252 252 + aria-hidden 253 253 + >{`Quote${props.quotesCount === 1 ? "" : "s"}`}</span> 254 254 + </button> 255 255 + )} 256 256 + {props.showComments === false ? null : ( 257 257 + <button 258 258 + className="flex gap-2 items-center w-fit px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline" 259 259 + onClick={() => { 260 260 + if ( 261 261 + !drawerOpen || 262 262 + drawer !== "comments" || 263 263 + pageId !== props.pageId 264 264 + ) 265 265 + openInteractionDrawer("comments", document_uri, props.pageId); 266 266 + else setInteractionState(document_uri, { drawerOpen: false }); 267 267 + }} 268 268 + aria-label="Post comments" 269 269 + > 270 270 + <CommentTiny aria-hidden />{" "} 271 271 + {props.commentsCount > 0 ? ( 272 272 + <span aria-hidden> 273 273 + {`${props.commentsCount} Comment${props.commentsCount === 1 ? "" : "s"}`} 274 274 + </span> 275 275 + ) : ( 276 276 + "Comment" 277 277 + )} 278 278 + </button> 279 279 + )} 280 280 + </div> 281 281 + <EditButton document={data} /> 282 282 + {subscribed && publication && ( 283 283 + <ManageSubscription 284 284 + base_url={getPublicationURL(publication)} 285 285 + pub_uri={publication.uri} 286 286 + subscribers={publication.publication_subscriptions} 287 287 + /> 288 288 + )} 289 289 + </div> 290 290 + </div> 291 291 + ); 292 292 + }; 293 293 + 294 294 + const TagPopover = (props: { 295 295 + tagCount: number; 296 296 + tags: string[] | undefined; 297 297 + }) => { 298 298 + return ( 299 299 + <Popover 300 300 + className="p-2! max-w-xs" 301 301 + trigger={ 302 302 + <div className="tags flex gap-1 items-center "> 303 303 + <TagTiny /> {props.tagCount} 304 304 + </div> 305 305 + } 306 306 + > 307 307 + <TagList tags={props.tags} className="text-secondary!" /> 308 308 + </Popover> 309 309 + ); 310 310 + }; 311 311 + 312 312 + const TagList = (props: { className?: string; tags: string[] | undefined }) => { 313 313 + if (!props.tags) return; 314 314 + return ( 315 315 + <div className="flex gap-1 flex-wrap"> 316 316 + {props.tags.map((tag, index) => ( 317 317 + <Tag name={tag} key={index} className={props.className} /> 318 318 + ))} 319 319 + </div> 320 320 + ); 321 321 + }; 164 322 export function getQuoteCount(document: PostPageData, pageId?: string) { 165 323 if (!document) return; 166 324 return getQuoteCountFromArray(document.quotesAndMentions, pageId); ··· 198 356 (c) => !(c.record as PubLeafletComment.Record)?.onPage, 199 357 ).length; 200 358 } 359 359 + 360 360 + const EditButton = (props: { document: PostPageData }) => { 361 361 + let { identity } = useIdentityData(); 362 362 + if (!props.document) return; 363 363 + if ( 364 364 + identity && 365 365 + identity.atp_did === 366 366 + props.document.documents_in_publications[0]?.publications?.identity_did && 367 367 + props.document.leaflets_in_publications[0] 368 368 + ) 369 369 + return ( 370 370 + <a 371 371 + href={`https://leaflet.pub/${props.document.leaflets_in_publications[0]?.leaflet}`} 372 372 + className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg !border-accent-1 !outline-accent-1" 373 373 + > 374 374 + <EditTiny /> Edit Post 375 375 + </a> 376 376 + ); 377 377 + return; 378 378 + };

+24 -66

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

··· 11 11 import { SubscribeWithBluesky } from "app/lish/Subscribe"; 12 12 import { EditTiny } from "components/Icons/EditTiny"; 13 13 import { 14 14 + ExpandedInteractions, 14 15 getCommentCount, 15 16 getQuoteCount, 16 17 Interactions, ··· 23 24 import { PageWrapper } from "components/Pages/Page"; 24 25 import { decodeQuotePosition } from "./quotePosition"; 25 26 import { PollData } from "./fetchPollData"; 27 27 + import { SharedPageProps } from "./PostPages"; 26 28 27 29 export function LinearDocumentPage({ 28 28 - document, 29 30 blocks, 30 30 - did, 31 31 - profile, 32 32 - preferences, 33 33 - pubRecord, 34 34 - prerenderedCodeBlocks, 35 35 - bskyPostData, 36 36 - document_uri, 37 37 - pageId, 38 38 - pageOptions, 39 39 - pollData, 40 40 - fullPageScroll, 41 41 - }: { 42 42 - document_uri: string; 43 43 - document: PostPageData; 31 31 + ...props 32 32 + }: Omit<SharedPageProps, "allPages"> & { 44 33 blocks: PubLeafletPagesLinearDocument.Block[]; 45 45 - profile?: ProfileViewDetailed; 46 46 - pubRecord: PubLeafletPublication.Record; 47 47 - did: string; 48 48 - prerenderedCodeBlocks?: Map<string, string>; 49 49 - bskyPostData: AppBskyFeedDefs.PostView[]; 50 50 - pollData: PollData[]; 51 51 - preferences: { showComments?: boolean }; 52 52 - pageId?: string; 53 53 - pageOptions?: React.ReactNode; 54 54 - fullPageScroll: boolean; 55 34 }) { 56 56 - let { identity } = useIdentityData(); 35 35 + const { 36 36 + document, 37 37 + did, 38 38 + profile, 39 39 + preferences, 40 40 + pubRecord, 41 41 + theme, 42 42 + prerenderedCodeBlocks, 43 43 + bskyPostData, 44 44 + pollData, 45 45 + document_uri, 46 46 + pageId, 47 47 + pageOptions, 48 48 + fullPageScroll, 49 49 + hasPageBackground, 50 50 + } = props; 57 51 let drawer = useDrawerOpen(document_uri); 58 52 59 59 - if (!document || !document.documents_in_publications[0].publications) 60 60 - return null; 53 53 + if (!document) return null; 61 54 62 62 - let hasPageBackground = !!pubRecord.theme?.showPageBackground; 63 55 let record = document.data as PubLeafletDocument.Record; 64 56 65 57 const isSubpage = !!pageId; ··· 92 84 did={did} 93 85 prerenderedCodeBlocks={prerenderedCodeBlocks} 94 86 /> 95 95 - <Interactions 87 87 + 88 88 + <ExpandedInteractions 96 89 pageId={pageId} 97 90 showComments={preferences.showComments} 98 91 commentsCount={getCommentCount(document, pageId) || 0} 99 92 quotesCount={getQuoteCount(document, pageId) || 0} 100 93 /> 101 101 - {!isSubpage && ( 102 102 - <> 103 103 - <hr className="border-border-light mb-4 mt-4 sm:mx-4 mx-3" /> 104 104 - <div className="sm:px-4 px-3"> 105 105 - {identity && 106 106 - identity.atp_did === 107 107 - document.documents_in_publications[0]?.publications 108 108 - ?.identity_did && 109 109 - document.leaflets_in_publications[0] ? ( 110 110 - <a 111 111 - href={`https://leaflet.pub/${document.leaflets_in_publications[0]?.leaflet}`} 112 112 - className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg !border-accent-1 !outline-accent-1 mx-auto" 113 113 - > 114 114 - <EditTiny /> Edit Post 115 115 - </a> 116 116 - ) : ( 117 117 - <SubscribeWithBluesky 118 118 - isPost 119 119 - base_url={getPublicationURL( 120 120 - document.documents_in_publications[0].publications, 121 121 - )} 122 122 - pub_uri={ 123 123 - document.documents_in_publications[0].publications.uri 124 124 - } 125 125 - subscribers={ 126 126 - document.documents_in_publications[0].publications 127 127 - .publication_subscriptions 128 128 - } 129 129 - pubName={ 130 130 - document.documents_in_publications[0].publications.name 131 131 - } 132 132 - /> 133 133 - )} 134 134 - </div> 135 135 - </> 136 136 - )} 94 94 + {!hasPageBackground && <div className={`spacer h-8 w-full`} />} 137 95 </PageWrapper> 138 96 </> 139 97 );

+11 -8

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

··· 59 59 return ( 60 60 <div 61 61 //The postContent class is important for QuoteHandler 62 62 - className={`postContent flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-6 ${className}`} 62 62 + className={`postContent flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4 ${className}`} 63 63 > 64 64 {blocks.map((b, index) => { 65 65 return ( ··· 293 293 } 294 294 case PubLeafletBlocksImage.isMain(b.block): { 295 295 return ( 296 296 - <div className={`relative flex ${alignment}`} {...blockProps}> 296 296 + <div 297 297 + className={`imageBlock relative flex ${alignment}`} 298 298 + {...blockProps} 299 299 + > 297 300 <img 298 301 alt={b.block.alt} 299 302 height={b.block.aspectRatio?.height} ··· 321 324 return ( 322 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. 323 326 <blockquote 324 324 - className={` blockquote 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!"}`} 325 328 {...blockProps} 326 329 > 327 330 <TextBlock ··· 336 339 } 337 340 case PubLeafletBlocksText.isMain(b.block): 338 341 return ( 339 339 - <p className={` ${className}`} {...blockProps}> 342 342 + <p className={`textBlock ${className}`} {...blockProps}> 340 343 <TextBlock 341 344 facets={b.block.facets} 342 345 plaintext={b.block.plaintext} ··· 349 352 case PubLeafletBlocksHeader.isMain(b.block): { 350 353 if (b.block.level === 1) 351 354 return ( 352 352 - <h2 className={`${className}`} {...blockProps}> 355 355 + <h2 className={`h1Block ${className}`} {...blockProps}> 353 356 <TextBlock 354 357 {...b.block} 355 358 index={index} ··· 360 363 ); 361 364 if (b.block.level === 2) 362 365 return ( 363 363 - <h3 className={`${className}`} {...blockProps}> 366 366 + <h3 className={`h2Block ${className}`} {...blockProps}> 364 367 <TextBlock 365 368 {...b.block} 366 369 index={index} ··· 371 374 ); 372 375 if (b.block.level === 3) 373 376 return ( 374 374 - <h4 className={`${className}`} {...blockProps}> 377 377 + <h4 className={`h3Block ${className}`} {...blockProps}> 375 378 <TextBlock 376 379 {...b.block} 377 380 index={index} ··· 383 386 // if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>; 384 387 // if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>; 385 388 return ( 386 386 - <h6 className={`${className}`} {...blockProps}> 389 389 + <h6 className={`h6Block ${className}`} {...blockProps}> 387 390 <TextBlock 388 391 {...b.block} 389 392 index={index}

-63

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

··· 1 1 - "use client"; 2 2 - 3 3 - import { Media } from "components/Media"; 4 4 - import { 5 5 - Interactions, 6 6 - useInteractionState, 7 7 - } from "../Interactions/Interactions"; 8 8 - import { useState, useEffect } from "react"; 9 9 - import { Json } from "supabase/database.types"; 10 10 - 11 11 - // export const CollapsedPostHeader = (props: { 12 12 - // title: string; 13 13 - // pubIcon?: string; 14 14 - // quotes: { link: string; bsky_posts: { post_view: Json } | null }[]; 15 15 - // }) => { 16 16 - // let [headerVisible, setHeaderVisible] = useState(false); 17 17 - // let { drawerOpen: open } = useInteractionState(); 18 18 - 19 19 - // useEffect(() => { 20 20 - // let post = window.document.getElementById("post-page"); 21 21 - 22 22 - // function handleScroll() { 23 23 - // let postHeader = window.document 24 24 - // .getElementById("post-header") 25 25 - // ?.getBoundingClientRect(); 26 26 - // if (postHeader && postHeader.bottom <= 0) { 27 27 - // setHeaderVisible(true); 28 28 - // } else { 29 29 - // setHeaderVisible(false); 30 30 - // } 31 31 - // } 32 32 - // post?.addEventListener("scroll", handleScroll); 33 33 - // return () => { 34 34 - // post?.removeEventListener("scroll", handleScroll); 35 35 - // }; 36 36 - // }, []); 37 37 - // if (!headerVisible) return; 38 38 - // if (open) return; 39 39 - // return ( 40 40 - // <Media 41 41 - // mobile 42 42 - // className="sticky top-0 left-0 right-0 w-full bg-bg-page border-b border-border-light -mx-3" 43 43 - // > 44 44 - // <div className="flex gap-2 items-center justify-between px-3 pt-2 pb-0.5 "> 45 45 - // <div className="text-tertiary font-bold text-sm truncate pr-1 grow"> 46 46 - // {props.title} 47 47 - // </div> 48 48 - // <div className="flex gap-2 "> 49 49 - // <Interactions compact quotes={props.quotes.length} /> 50 50 - // <div 51 51 - // style={{ 52 52 - // backgroundRepeat: "no-repeat", 53 53 - // backgroundPosition: "center", 54 54 - // backgroundSize: "cover", 55 55 - // backgroundImage: `url(${props.pubIcon})`, 56 56 - // }} 57 57 - // className="shrink-0 w-4 h-4 rounded-full mt-[2px]" 58 58 - // /> 59 59 - // </div> 60 60 - // </div> 61 61 - // </Media> 62 62 - // ); 63 63 - // };

+75 -52

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

··· 16 16 import { EditTiny } from "components/Icons/EditTiny"; 17 17 import { SpeedyLink } from "components/SpeedyLink"; 18 18 import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 19 19 + import Post from "app/p/[didOrHandle]/[rkey]/l-quote/[quote]/page"; 20 20 + import { Separator } from "components/Layout"; 19 21 20 22 export function PostHeader(props: { 21 23 data: PostPageData; ··· 27 29 28 30 let record = document?.data as PubLeafletDocument.Record; 29 31 let profile = props.profile; 30 30 - let pub = props.data?.documents_in_publications[0].publications; 31 31 - let pubRecord = pub?.record as PubLeafletPublication.Record; 32 32 + let pub = props.data?.documents_in_publications[0]?.publications; 32 33 33 34 const formattedDate = useLocalizedDate( 34 35 record.publishedAt || new Date().toISOString(), ··· 36 37 year: "numeric", 37 38 month: "long", 38 39 day: "2-digit", 39 39 - } 40 40 + }, 40 41 ); 41 42 42 42 - if (!document?.data || !document.documents_in_publications[0].publications) 43 43 - return; 43 43 + if (!document?.data) return; 44 44 return ( 45 45 - <div 46 46 - className="max-w-prose w-full mx-auto px-3 sm:px-4 sm:pt-3 pt-2" 47 47 - id="post-header" 48 48 - > 49 49 - <div className="pubHeader flex flex-col pb-5"> 50 50 - <div className="flex justify-between w-full"> 51 51 - <SpeedyLink 52 52 - className="font-bold hover:no-underline text-accent-contrast" 53 53 - href={ 54 54 - document && 55 55 - getPublicationURL( 56 56 - document.documents_in_publications[0].publications, 57 57 - ) 58 58 - } 59 59 - > 60 60 - {pub?.name} 61 61 - </SpeedyLink> 45 45 + <PostHeaderLayout 46 46 + pubLink={ 47 47 + <> 48 48 + {pub && ( 49 49 + <SpeedyLink 50 50 + className="font-bold hover:no-underline text-accent-contrast" 51 51 + href={document && getPublicationURL(pub)} 52 52 + > 53 53 + {pub?.name} 54 54 + </SpeedyLink> 55 55 + )} 62 56 {identity && 63 63 - identity.atp_did === 64 64 - document.documents_in_publications[0]?.publications 65 65 - .identity_did && 57 57 + pub && 58 58 + identity.atp_did === pub.identity_did && 66 59 document.leaflets_in_publications[0] && ( 67 60 <a 68 61 className=" rounded-full flex place-items-center" ··· 71 64 <EditTiny className="shrink-0" /> 72 65 </a> 73 66 )} 74 74 - </div> 75 75 - <h2 className="">{record.title}</h2> 76 76 - {record.description ? ( 77 77 - <p className="italic text-secondary">{record.description}</p> 78 78 - ) : null} 79 79 - 80 80 - <div className="text-sm text-tertiary pt-3 flex gap-1 flex-wrap"> 81 81 - {profile ? ( 82 82 - <> 83 83 - <a 84 84 - className="text-tertiary" 85 85 - href={`https://bsky.app/profile/${profile.handle}`} 86 86 - > 87 87 - by {profile.displayName || profile.handle} 88 88 - </a> 89 89 - </> 90 90 - ) : null} 91 91 - {record.publishedAt ? ( 92 92 - <> 93 93 - | 94 94 - <p>{formattedDate}</p> 95 95 - </> 96 96 - ) : null} 97 97 - |{" "} 67 67 + </> 68 68 + } 69 69 + postTitle={record.title} 70 70 + postDescription={record.description} 71 71 + postInfo={ 72 72 + <> 73 73 + <div className="flex flex-row gap-2 items-center"> 74 74 + {profile ? ( 75 75 + <> 76 76 + <a 77 77 + className="text-tertiary" 78 78 + href={`https://bsky.app/profile/${profile.handle}`} 79 79 + > 80 80 + {profile.displayName || profile.handle} 81 81 + </a> 82 82 + </> 83 83 + ) : null} 84 84 + {record.publishedAt ? ( 85 85 + <> 86 86 + <Separator classname="h-4!" /> 87 87 + <p>{formattedDate}</p> 88 88 + </> 89 89 + ) : null} 90 90 + </div> 98 91 <Interactions 99 92 showComments={props.preferences.showComments} 100 100 - compact 101 93 quotesCount={getQuoteCount(document) || 0} 102 94 commentsCount={getCommentCount(document) || 0} 103 95 /> 104 104 - </div> 96 96 + </> 97 97 + } 98 98 + /> 99 99 + ); 100 100 + } 101 101 + 102 102 + export const PostHeaderLayout = (props: { 103 103 + pubLink: React.ReactNode; 104 104 + postTitle: React.ReactNode | undefined; 105 105 + postDescription: React.ReactNode | undefined; 106 106 + postInfo: React.ReactNode; 107 107 + }) => { 108 108 + return ( 109 109 + <div 110 110 + className="postHeader max-w-prose w-full flex flex-col px-3 sm:px-4 sm:pt-3 pt-2 pb-5" 111 111 + id="post-header" 112 112 + > 113 113 + <div className="pubInfo flex text-accent-contrast font-bold justify-between w-full"> 114 114 + {props.pubLink} 115 115 + </div> 116 116 + <h2 117 117 + className={`postTitle text-xl leading-tight pt-0.5 font-bold outline-hidden bg-transparent ${!props.postTitle && "text-tertiary italic"}`} 118 118 + > 119 119 + {props.postTitle ? props.postTitle : "Untitled"} 120 120 + </h2> 121 121 + {props.postDescription ? ( 122 122 + <p className="postDescription italic text-secondary outline-hidden bg-transparent pt-1"> 123 123 + {props.postDescription} 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} 105 128 </div> 106 129 </div> 107 130 ); 108 108 - } 131 131 + };

+110 -75

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

··· 98 98 }; 99 99 }); 100 100 101 101 + // Shared props type for both page components 102 102 + export type SharedPageProps = { 103 103 + document: PostPageData; 104 104 + did: string; 105 105 + profile: ProfileViewDetailed; 106 106 + preferences: { showComments?: boolean }; 107 107 + pubRecord?: PubLeafletPublication.Record; 108 108 + theme?: PubLeafletPublication.Theme | null; 109 109 + prerenderedCodeBlocks?: Map<string, string>; 110 110 + bskyPostData: AppBskyFeedDefs.PostView[]; 111 111 + pollData: PollData[]; 112 112 + document_uri: string; 113 113 + fullPageScroll: boolean; 114 114 + hasPageBackground: boolean; 115 115 + pageId?: string; 116 116 + pageOptions?: React.ReactNode; 117 117 + allPages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[]; 118 118 + }; 119 119 + 120 120 + // Component that renders either Canvas or Linear page based on page type 121 121 + function PageRenderer({ 122 122 + page, 123 123 + ...sharedProps 124 124 + }: { 125 125 + page: PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main; 126 126 + } & SharedPageProps) { 127 127 + const isCanvas = PubLeafletPagesCanvas.isMain(page); 128 128 + 129 129 + if (isCanvas) { 130 130 + return ( 131 131 + <CanvasPage 132 132 + {...sharedProps} 133 133 + blocks={(page as PubLeafletPagesCanvas.Main).blocks || []} 134 134 + pages={sharedProps.allPages} 135 135 + /> 136 136 + ); 137 137 + } 138 138 + 139 139 + return ( 140 140 + <LinearDocumentPage 141 141 + {...sharedProps} 142 142 + blocks={(page as PubLeafletPagesLinearDocument.Main).blocks || []} 143 143 + /> 144 144 + ); 145 145 + } 146 146 + 101 147 export function PostPages({ 102 148 document, 103 103 - blocks, 104 149 did, 105 150 profile, 106 151 preferences, ··· 112 157 }: { 113 158 document_uri: string; 114 159 document: PostPageData; 115 115 - blocks: PubLeafletPagesLinearDocument.Block[]; 116 160 profile: ProfileViewDetailed; 117 117 - pubRecord: PubLeafletPublication.Record; 161 161 + pubRecord?: PubLeafletPublication.Record; 118 162 did: string; 119 163 prerenderedCodeBlocks?: Map<string, string>; 120 164 bskyPostData: AppBskyFeedDefs.PostView[]; ··· 123 167 }) { 124 168 let drawer = useDrawerOpen(document_uri); 125 169 useInitializeOpenPages(); 126 126 - let pages = useOpenPages(); 127 127 - if (!document || !document.documents_in_publications[0].publications) 128 128 - return null; 170 170 + let openPageIds = useOpenPages(); 171 171 + if (!document) return null; 129 172 130 130 - let hasPageBackground = !!pubRecord.theme?.showPageBackground; 131 173 let record = document.data as PubLeafletDocument.Record; 174 174 + let theme = pubRecord?.theme || record.theme || null; 175 175 + // For publication posts, respect the publication's showPageBackground setting 176 176 + // For standalone documents, default to showing page background 177 177 + let isInPublication = !!pubRecord; 178 178 + let hasPageBackground = isInPublication ? !!theme?.showPageBackground : true; 132 179 let quotesAndMentions = document.quotesAndMentions; 133 180 134 134 - let fullPageScroll = !hasPageBackground && !drawer && pages.length === 0; 181 181 + let firstPage = record.pages[0] as 182 182 + | PubLeafletPagesLinearDocument.Main 183 183 + | PubLeafletPagesCanvas.Main; 184 184 + 185 185 + // Canvas pages don't support fullPageScroll well due to fixed 1272px width 186 186 + let firstPageIsCanvas = PubLeafletPagesCanvas.isMain(firstPage); 187 187 + 188 188 + // Shared props used for all pages 189 189 + const sharedProps: SharedPageProps = { 190 190 + document, 191 191 + did, 192 192 + profile, 193 193 + preferences, 194 194 + pubRecord, 195 195 + theme, 196 196 + prerenderedCodeBlocks, 197 197 + bskyPostData, 198 198 + pollData, 199 199 + document_uri, 200 200 + hasPageBackground, 201 201 + allPages: record.pages as ( 202 202 + | PubLeafletPagesLinearDocument.Main 203 203 + | PubLeafletPagesCanvas.Main 204 204 + )[], 205 205 + fullPageScroll: 206 206 + !hasPageBackground && 207 207 + !drawer && 208 208 + openPageIds.length === 0 && 209 209 + !firstPageIsCanvas, 210 210 + }; 211 211 + 135 212 return ( 136 213 <> 137 137 - {!fullPageScroll && <BookendSpacer />} 138 138 - <LinearDocumentPage 139 139 - document={document} 140 140 - blocks={blocks} 141 141 - did={did} 142 142 - profile={profile} 143 143 - fullPageScroll={fullPageScroll} 144 144 - pollData={pollData} 145 145 - preferences={preferences} 146 146 - pubRecord={pubRecord} 147 147 - prerenderedCodeBlocks={prerenderedCodeBlocks} 148 148 - bskyPostData={bskyPostData} 149 149 - document_uri={document_uri} 150 150 - /> 214 214 + {!sharedProps.fullPageScroll && <BookendSpacer />} 215 215 + 216 216 + <PageRenderer page={firstPage} {...sharedProps} /> 151 217 152 218 {drawer && !drawer.pageId && ( 153 219 <InteractionDrawer 154 220 document_uri={document.uri} 155 221 comments={ 156 156 - pubRecord.preferences?.showComments === false 222 222 + pubRecord?.preferences?.showComments === false 157 223 ? [] 158 224 : document.comments_on_documents 159 225 } ··· 162 228 /> 163 229 )} 164 230 165 165 - {pages.map((p) => { 231 231 + {openPageIds.map((pageId) => { 166 232 let page = record.pages.find( 167 167 - (page) => 233 233 + (p) => 168 234 ( 169 169 - page as 235 235 + p as 170 236 | PubLeafletPagesLinearDocument.Main 171 237 | PubLeafletPagesCanvas.Main 172 172 - ).id === p, 238 238 + ).id === pageId, 173 239 ) as 174 240 | PubLeafletPagesLinearDocument.Main 175 241 | PubLeafletPagesCanvas.Main 176 242 | undefined; 177 177 - if (!page) return null; 178 243 179 179 - const isCanvas = PubLeafletPagesCanvas.isMain(page); 244 244 + if (!page) return null; 180 245 181 246 return ( 182 182 - <Fragment key={p}> 247 247 + <Fragment key={pageId}> 183 248 <SandwichSpacer /> 184 184 - {isCanvas ? ( 185 185 - <CanvasPage 186 186 - fullPageScroll={false} 187 187 - document={document} 188 188 - blocks={(page as PubLeafletPagesCanvas.Main).blocks} 189 189 - did={did} 190 190 - preferences={preferences} 191 191 - profile={profile} 192 192 - pubRecord={pubRecord} 193 193 - prerenderedCodeBlocks={prerenderedCodeBlocks} 194 194 - pollData={pollData} 195 195 - bskyPostData={bskyPostData} 196 196 - document_uri={document_uri} 197 197 - pageId={page.id} 198 198 - pages={record.pages as PubLeafletPagesLinearDocument.Main[]} 199 199 - pageOptions={ 200 200 - <PageOptions 201 201 - onClick={() => closePage(page?.id!)} 202 202 - hasPageBackground={hasPageBackground} 203 203 - /> 204 204 - } 205 205 - /> 206 206 - ) : ( 207 207 - <LinearDocumentPage 208 208 - fullPageScroll={false} 209 209 - document={document} 210 210 - blocks={(page as PubLeafletPagesLinearDocument.Main).blocks} 211 211 - did={did} 212 212 - preferences={preferences} 213 213 - pubRecord={pubRecord} 214 214 - pollData={pollData} 215 215 - prerenderedCodeBlocks={prerenderedCodeBlocks} 216 216 - bskyPostData={bskyPostData} 217 217 - document_uri={document_uri} 218 218 - pageId={page.id} 219 219 - pageOptions={ 220 220 - <PageOptions 221 221 - onClick={() => closePage(page?.id!)} 222 222 - hasPageBackground={hasPageBackground} 223 223 - /> 224 224 - } 225 225 - /> 226 226 - )} 249 249 + <PageRenderer 250 250 + page={page} 251 251 + {...sharedProps} 252 252 + fullPageScroll={false} 253 253 + pageId={page.id} 254 254 + pageOptions={ 255 255 + <PageOptions 256 256 + onClick={() => closePage(page.id!)} 257 257 + hasPageBackground={hasPageBackground} 258 258 + /> 259 259 + } 260 260 + /> 227 261 {drawer && drawer.pageId === page.id && ( 228 262 <InteractionDrawer 229 263 pageId={page.id} 230 264 document_uri={document.uri} 231 265 comments={ 232 232 - pubRecord.preferences?.showComments === false 266 266 + pubRecord?.preferences?.showComments === false 233 267 ? [] 234 268 : document.comments_on_documents 235 269 } ··· 240 274 </Fragment> 241 275 ); 242 276 })} 243 243 - {!fullPageScroll && <BookendSpacer />} 277 277 + 278 278 + {!sharedProps.fullPageScroll && <BookendSpacer />} 244 279 </> 245 280 ); 246 281 }

+4 -5

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

··· 106 106 <div className="grow"> 107 107 {title && ( 108 108 <div 109 109 - className={`pageBlockOne outline-none resize-none align-top flex gap-2 ${title.$type === "pub.leaflet.blocks.header" ? "font-bold text-base" : ""}`} 109 109 + className={`pageBlockOne outline-none resize-none align-top gap-2 ${title.$type === "pub.leaflet.blocks.header" ? "font-bold text-base" : ""}`} 110 110 > 111 111 <TextBlock 112 112 facets={title.facets} ··· 118 118 )} 119 119 {description && ( 120 120 <div 121 121 - className={`pageBlockLineTwo outline-none resize-none align-top flex gap-2 ${description.$type === "pub.leaflet.blocks.header" ? "font-bold" : ""}`} 121 121 + className={`pageBlockLineTwo outline-none resize-none align-top gap-2 ${description.$type === "pub.leaflet.blocks.header" ? "font-bold" : ""}`} 122 122 > 123 123 <TextBlock 124 124 facets={description.facets} ··· 151 151 let previewRef = useRef<HTMLDivElement | null>(null); 152 152 let { rootEntity } = useReplicache(); 153 153 let data = useContext(PostPageContext); 154 154 - let theme = data?.documents_in_publications[0]?.publications 155 155 - ?.record as PubLeafletPublication.Record; 154 154 + let theme = data?.theme; 156 155 let pageWidth = `var(--page-width-unitless)`; 157 157 - let cardBorderHidden = !theme.theme?.showPageBackground; 156 156 + let cardBorderHidden = !theme?.showPageBackground; 158 157 return ( 159 158 <div 160 159 ref={previewRef}

+3 -2

app/lish/[did]/[publication]/[rkey]/extractCodeBlocks.ts

··· 1 1 import { 2 2 PubLeafletDocument, 3 3 PubLeafletPagesLinearDocument, 4 4 + PubLeafletPagesCanvas, 4 5 PubLeafletBlocksCode, 5 6 } from "lexicons/api"; 6 7 import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki"; 7 8 8 9 export async function extractCodeBlocks( 9 9 - blocks: PubLeafletPagesLinearDocument.Block[], 10 10 + blocks: PubLeafletPagesLinearDocument.Block[] | PubLeafletPagesCanvas.Block[], 10 11 ): Promise<Map<string, string>> { 11 12 const codeBlocks = new Map<string, string>(); 12 13 13 13 - // Process all pages in the document 14 14 + // Process all blocks (works for both linear and canvas) 14 15 for (let i = 0; i < blocks.length; i++) { 15 16 const block = blocks[i]; 16 17 const currentIndex = [i];

+12 -3

app/lish/[did]/[publication]/[rkey]/getPostPageData.ts

··· 1 1 import { supabaseServerClient } from "supabase/serverClient"; 2 2 import { AtUri } from "@atproto/syntax"; 3 3 - import { PubLeafletPublication } from "lexicons/api"; 3 3 + import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 4 4 5 5 export async function getPostPageData(uri: string) { 6 6 let { data: document } = await supabaseServerClient ··· 23 23 // Fetch constellation backlinks for mentions 24 24 const pubRecord = document.documents_in_publications[0]?.publications 25 25 ?.record as PubLeafletPublication.Record; 26 26 - const rkey = new AtUri(uri).rkey; 27 27 - const postUrl = `https://${pubRecord?.base_path}/${rkey}`; 26 26 + let aturi = new AtUri(uri); 27 27 + const postUrl = pubRecord 28 28 + ? `https://${pubRecord?.base_path}/${aturi.rkey}` 29 29 + : `https://leaflet.pub/p/${aturi.host}/${aturi.rkey}`; 28 30 const constellationBacklinks = await getConstellationBacklinks(postUrl); 29 31 30 32 // Deduplicate constellation backlinks (same post could appear in both links and embeds) ··· 43 45 ...uniqueBacklinks, 44 46 ]; 45 47 48 48 + let theme = 49 49 + ( 50 50 + document?.documents_in_publications[0]?.publications 51 51 + ?.record as PubLeafletPublication.Record 52 52 + )?.theme || (document?.data as PubLeafletDocument.Record)?.theme; 53 53 + 46 54 return { 47 55 ...document, 48 56 quotesAndMentions, 57 57 + theme, 49 58 }; 50 59 } 51 60

+4 -3

app/lish/[did]/[publication]/[rkey]/l-quote/[quote]/opengraph-image.ts

··· 5 5 export const revalidate = 60; 6 6 7 7 export default async function OpenGraphImage(props: { 8 8 - params: { publication: string; did: string; rkey: string; quote: string }; 8 8 + params: Promise<{ publication: string; did: string; rkey: string; quote: string }>; 9 9 }) { 10 10 - let quotePosition = decodeQuotePosition(props.params.quote); 10 10 + let params = await props.params; 11 11 + let quotePosition = decodeQuotePosition(params.quote); 11 12 return getMicroLinkOgImage( 12 12 - `/lish/${decodeURIComponent(props.params.did)}/${decodeURIComponent(props.params.publication)}/${props.params.rkey}/l-quote/${props.params.quote}#${quotePosition?.pageId ? `${quotePosition.pageId}~` : ""}${quotePosition?.start.block.join(".")}_${quotePosition?.start.offset}`, 13 13 + `/lish/${decodeURIComponent(params.did)}/${decodeURIComponent(params.publication)}/${params.rkey}/l-quote/${params.quote}#${quotePosition?.pageId ? `${quotePosition.pageId}~` : ""}${quotePosition?.start.block.join(".")}_${quotePosition?.start.offset}`, 13 14 { 14 15 width: 620, 15 16 height: 324,

+3 -2

app/lish/[did]/[publication]/[rkey]/opengraph-image.ts

··· 4 4 export const revalidate = 60; 5 5 6 6 export default async function OpenGraphImage(props: { 7 7 - params: { publication: string; did: string; rkey: string }; 7 7 + params: Promise<{ publication: string; did: string; rkey: string }>; 8 8 }) { 9 9 + let params = await props.params; 9 10 return getMicroLinkOgImage( 10 10 - `/lish/${decodeURIComponent(props.params.did)}/${decodeURIComponent(props.params.publication)}/${props.params.rkey}/`, 11 11 + `/lish/${decodeURIComponent(params.did)}/${decodeURIComponent(params.publication)}/${params.rkey}/`, 11 12 ); 12 13 }

+14 -156

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

··· 1 1 import { supabaseServerClient } from "supabase/serverClient"; 2 2 import { AtUri } from "@atproto/syntax"; 3 3 import { ids } from "lexicons/api/lexicons"; 4 4 - import { 5 5 - PubLeafletBlocksBskyPost, 6 6 - PubLeafletDocument, 7 7 - PubLeafletPagesLinearDocument, 8 8 - PubLeafletPublication, 9 9 - } from "lexicons/api"; 4 4 + import { PubLeafletDocument } from "lexicons/api"; 10 5 import { Metadata } from "next"; 11 11 - import { AtpAgent } from "@atproto/api"; 12 12 - import { QuoteHandler } from "./QuoteHandler"; 13 13 - import { InteractionDrawer } from "./Interactions/InteractionDrawer"; 14 14 - import { 15 15 - PublicationBackgroundProvider, 16 16 - PublicationThemeProvider, 17 17 - } from "components/ThemeManager/PublicationThemeProvider"; 18 18 - import { getPostPageData } from "./getPostPageData"; 19 19 - import { PostPageContextProvider } from "./PostPageContext"; 20 20 - import { PostPages } from "./PostPages"; 21 21 - import { extractCodeBlocks } from "./extractCodeBlocks"; 22 22 - import { LeafletLayout } from "components/LeafletLayout"; 23 23 - import { fetchPollData } from "./fetchPollData"; 6 6 + import { DocumentPageRenderer } from "./DocumentPageRenderer"; 24 7 25 8 export async function generateMetadata(props: { 26 9 params: Promise<{ publication: string; did: string; rkey: string }>; ··· 42 25 43 26 return { 44 27 icons: { 28 28 + icon: { 29 29 + url: 30 30 + process.env.NODE_ENV === "development" 31 31 + ? `/lish/${did}/${params.publication}/icon` 32 32 + : "/icon", 33 33 + sizes: "32x32", 34 34 + type: "image/png", 35 35 + }, 45 36 other: { 46 37 rel: "alternate", 47 38 url: document.uri, ··· 57 48 export default async function Post(props: { 58 49 params: Promise<{ publication: string; did: string; rkey: string }>; 59 50 }) { 60 60 - let did = decodeURIComponent((await props.params).did); 51 51 + let params = await props.params; 52 52 + let did = decodeURIComponent(params.did); 53 53 + 61 54 if (!did) 62 55 return ( 63 56 <div className="p-4 text-lg text-center flex flex-col gap-4"> ··· 68 61 </p> 69 62 </div> 70 63 ); 71 71 - let agent = new AtpAgent({ 72 72 - service: "https://public.api.bsky.app", 73 73 - fetch: (...args) => 74 74 - fetch(args[0], { 75 75 - ...args[1], 76 76 - next: { revalidate: 3600 }, 77 77 - }), 78 78 - }); 79 79 - let [document, profile] = await Promise.all([ 80 80 - getPostPageData( 81 81 - AtUri.make( 82 82 - did, 83 83 - ids.PubLeafletDocument, 84 84 - (await props.params).rkey, 85 85 - ).toString(), 86 86 - ), 87 87 - agent.getProfile({ actor: did }), 88 88 - ]); 89 89 - if (!document?.data || !document.documents_in_publications[0].publications) 90 90 - return ( 91 91 - <div className="bg-bg-leaflet h-full p-3 text-center relative"> 92 92 - <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-md w-full"> 93 93 - <div className=" px-3 py-4 opaque-container flex flex-col gap-1 mx-2 "> 94 94 - <h3>Sorry, post not found!</h3> 95 95 - <p> 96 96 - This may be a glitch on our end. If the issue persists please{" "} 97 97 - <a href="mailto:contact@leaflet.pub">send us a note</a>. 98 98 - </p> 99 99 - </div> 100 100 - </div> 101 101 - </div> 102 102 - ); 103 103 - let record = document.data as PubLeafletDocument.Record; 104 104 - let bskyPosts = 105 105 - record.pages.flatMap((p) => { 106 106 - let page = p as PubLeafletPagesLinearDocument.Main; 107 107 - return page.blocks?.filter( 108 108 - (b) => b.block.$type === ids.PubLeafletBlocksBskyPost, 109 109 - ); 110 110 - }) || []; 111 64 112 112 - // Batch bsky posts into groups of 25 and fetch in parallel 113 113 - let bskyPostBatches = []; 114 114 - for (let i = 0; i < bskyPosts.length; i += 25) { 115 115 - bskyPostBatches.push(bskyPosts.slice(i, i + 25)); 116 116 - } 117 117 - 118 118 - let bskyPostResponses = await Promise.all( 119 119 - bskyPostBatches.map((batch) => 120 120 - agent.getPosts( 121 121 - { 122 122 - uris: batch.map((p) => { 123 123 - let block = p?.block as PubLeafletBlocksBskyPost.Main; 124 124 - return block.postRef.uri; 125 125 - }), 126 126 - }, 127 127 - { headers: {} }, 128 128 - ), 129 129 - ), 130 130 - ); 131 131 - 132 132 - let bskyPostData = 133 133 - bskyPostResponses.length > 0 134 134 - ? bskyPostResponses.flatMap((response) => response.data.posts) 135 135 - : []; 136 136 - 137 137 - // Extract poll blocks and fetch vote data 138 138 - let pollBlocks = record.pages.flatMap((p) => { 139 139 - let page = p as PubLeafletPagesLinearDocument.Main; 140 140 - return ( 141 141 - page.blocks?.filter((b) => b.block.$type === ids.PubLeafletBlocksPoll) || 142 142 - [] 143 143 - ); 144 144 - }); 145 145 - let pollData = await fetchPollData( 146 146 - pollBlocks.map((b) => (b.block as any).pollRef.uri), 147 147 - ); 148 148 - 149 149 - let pubRecord = document.documents_in_publications[0]?.publications 150 150 - .record as PubLeafletPublication.Record; 151 151 - 152 152 - let firstPage = record.pages[0]; 153 153 - let blocks: PubLeafletPagesLinearDocument.Block[] = []; 154 154 - if (PubLeafletPagesLinearDocument.isMain(firstPage)) { 155 155 - blocks = firstPage.blocks || []; 156 156 - } 157 157 - 158 158 - let prerenderedCodeBlocks = await extractCodeBlocks(blocks); 159 159 - 160 160 - return ( 161 161 - <PostPageContextProvider value={document}> 162 162 - <PublicationThemeProvider 163 163 - record={pubRecord} 164 164 - pub_creator={ 165 165 - document.documents_in_publications[0].publications.identity_did 166 166 - } 167 167 - > 168 168 - <PublicationBackgroundProvider 169 169 - record={pubRecord} 170 170 - pub_creator={ 171 171 - document.documents_in_publications[0].publications.identity_did 172 172 - } 173 173 - > 174 174 - {/* 175 175 - TODO: SCROLL PAGE TO FIT DRAWER 176 176 - If the drawer fits without scrolling, dont scroll 177 177 - If both drawer and page fit if you scrolled it, scroll it all into the center 178 178 - If the drawer and pafe doesn't all fit, scroll to drawer 179 179 - 180 180 - TODO: SROLL BAR 181 181 - If there is no drawer && there is no page bg, scroll the entire page 182 182 - If there is either a drawer open OR a page background, scroll just the post content 183 183 - 184 184 - TODO: HIGHLIGHTING BORKED 185 185 - on chrome, if you scroll backward, things stop working 186 186 - seems like if you use an older browser, sel direction is not a thing yet 187 187 - */} 188 188 - <LeafletLayout> 189 189 - <PostPages 190 190 - document_uri={document.uri} 191 191 - preferences={pubRecord.preferences || {}} 192 192 - pubRecord={pubRecord} 193 193 - profile={JSON.parse(JSON.stringify(profile.data))} 194 194 - document={document} 195 195 - bskyPostData={bskyPostData} 196 196 - did={did} 197 197 - blocks={blocks} 198 198 - prerenderedCodeBlocks={prerenderedCodeBlocks} 199 199 - pollData={pollData} 200 200 - /> 201 201 - </LeafletLayout> 202 202 - 203 203 - <QuoteHandler /> 204 204 - </PublicationBackgroundProvider> 205 205 - </PublicationThemeProvider> 206 206 - </PostPageContextProvider> 207 207 - ); 65 65 + return <DocumentPageRenderer did={did} rkey={params.rkey} />; 208 66 }

+45 -36

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

··· 1 1 "use client"; 2 2 import { AtUri } from "@atproto/syntax"; 3 3 - import { PubLeafletDocument } from "lexicons/api"; 3 3 + import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 4 4 import { EditTiny } from "components/Icons/EditTiny"; 5 5 6 6 import { usePublicationData } from "./PublicationSWRProvider"; ··· 13 13 import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; 14 14 import { DeleteSmall } from "components/Icons/DeleteSmall"; 15 15 import { ShareSmall } from "components/Icons/ShareSmall"; 16 16 - import { ShareButton } from "components/ShareOptions"; 16 16 + import { ShareButton } from "app/[leaflet_id]/actions/ShareOptions"; 17 17 import { SpeedyLink } from "components/SpeedyLink"; 18 18 import { QuoteTiny } from "components/Icons/QuoteTiny"; 19 19 import { CommentTiny } from "components/Icons/CommentTiny"; 20 20 + import { InteractionPreview } from "components/InteractionsPreview"; 20 21 import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 21 22 import { LeafletOptions } from "app/(home-pages)/home/LeafletList/LeafletOptions"; 23 23 + import { StaticLeafletDataContext } from "components/PageSWRDataProvider"; 22 24 23 25 export function PublishedPostsList(props: { 24 26 searchValue: string; ··· 27 29 let { data } = usePublicationData(); 28 30 let params = useParams(); 29 31 let { publication } = data!; 32 32 + let pubRecord = publication?.record as PubLeafletPublication.Record; 33 33 + 30 34 if (!publication) return null; 31 35 if (publication.documents_in_publications.length === 0) 32 36 return ( ··· 54 58 (l) => doc.documents && l.doc === doc.documents.uri, 55 59 ); 56 60 let uri = new AtUri(doc.documents.uri); 57 57 - let record = doc.documents.data as PubLeafletDocument.Record; 61 61 + let postRecord = doc.documents.data as PubLeafletDocument.Record; 58 62 let quotes = doc.documents.document_mentions_in_bsky[0]?.count || 0; 59 63 let comments = doc.documents.comments_on_documents[0]?.count || 0; 64 64 + let tags = (postRecord?.tags as string[] | undefined) || []; 60 65 61 66 let postLink = data?.publication 62 67 ? `${getPublicationURL(data?.publication)}/${new AtUri(doc.documents.uri).rkey}` ··· 80 85 href={`${getPublicationURL(publication)}/${uri.rkey}`} 81 86 > 82 87 <h3 className="text-primary grow leading-snug"> 83 83 - {record.title} 88 88 + {postRecord.title} 84 89 </h3> 85 90 </a> 86 91 <div className="flex justify-start align-top flex-row gap-1"> 87 87 - {leaflet && ( 92 92 + {leaflet && leaflet.permission_tokens && ( 88 93 <> 89 94 <SpeedyLink 90 95 className="pt-[6px]" ··· 93 98 <EditTiny /> 94 99 </SpeedyLink> 95 100 96 96 - <LeafletOptions 97 97 - leaflet={leaflet?.permission_tokens!} 98 98 - document_uri={doc.documents.uri} 99 99 - shareLink={postLink} 100 100 - loggedIn={true} 101 101 - /> 101 101 + <StaticLeafletDataContext 102 102 + value={{ 103 103 + ...leaflet.permission_tokens, 104 104 + leaflets_in_publications: [ 105 105 + { 106 106 + ...leaflet, 107 107 + publications: publication, 108 108 + documents: doc.documents 109 109 + ? { 110 110 + uri: doc.documents.uri, 111 111 + indexed_at: doc.documents.indexed_at, 112 112 + data: doc.documents.data, 113 113 + } 114 114 + : null, 115 115 + }, 116 116 + ], 117 117 + leaflets_to_documents: [], 118 118 + blocked_by_admin: null, 119 119 + custom_domain_routes: [], 120 120 + }} 121 121 + > 122 122 + <LeafletOptions loggedIn={true} /> 123 123 + </StaticLeafletDataContext> 102 124 </> 103 125 )} 104 126 </div> 105 127 </div> 106 128 107 107 - {record.description ? ( 129 129 + {postRecord.description ? ( 108 130 <p className="italic text-secondary"> 109 109 - {record.description} 131 131 + {postRecord.description} 110 132 </p> 111 133 ) : null} 112 112 - <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-3"> 113 113 - {record.publishedAt ? ( 114 114 - <PublishedDate dateString={record.publishedAt} /> 134 134 + <div className="text-sm text-tertiary flex gap-3 justify-between sm:justify-start items-center pt-3"> 135 135 + {postRecord.publishedAt ? ( 136 136 + <PublishedDate dateString={postRecord.publishedAt} /> 115 137 ) : null} 116 116 - {(comments > 0 || quotes > 0) && record.publishedAt 117 117 - ? " | " 118 118 - : ""} 119 119 - {quotes > 0 && ( 120 120 - <SpeedyLink 121 121 - href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=quotes`} 122 122 - className="flex flex-row gap-1 text-sm text-tertiary items-center" 123 123 - > 124 124 - <QuoteTiny /> {quotes} 125 125 - </SpeedyLink> 126 126 - )} 127 127 - {comments > 0 && quotes > 0 ? " " : ""} 128 128 - {comments > 0 && ( 129 129 - <SpeedyLink 130 130 - href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=comments`} 131 131 - className="flex flex-row gap-1 text-sm text-tertiary items-center" 132 132 - > 133 133 - <CommentTiny /> {comments} 134 134 - </SpeedyLink> 135 135 - )} 138 138 + <InteractionPreview 139 139 + quotesCount={quotes} 140 140 + commentsCount={comments} 141 141 + tags={tags} 142 142 + showComments={pubRecord?.preferences?.showComments} 143 143 + postUrl={`${getPublicationURL(publication)}/${uri.rkey}`} 144 144 + /> 136 145 </div> 137 146 </div> 138 147 </div>

+67

app/lish/[did]/[publication]/icon/route.ts

··· 1 1 + import { NextRequest } from "next/server"; 2 2 + import { IdResolver } from "@atproto/identity"; 3 3 + import { AtUri } from "@atproto/syntax"; 4 4 + import { PubLeafletPublication } from "lexicons/api"; 5 5 + import { supabaseServerClient } from "supabase/serverClient"; 6 6 + import sharp from "sharp"; 7 7 + import { redirect } from "next/navigation"; 8 8 + 9 9 + let idResolver = new IdResolver(); 10 10 + 11 11 + export const dynamic = "force-dynamic"; 12 12 + 13 13 + export async function GET( 14 14 + request: NextRequest, 15 15 + props: { params: Promise<{ did: string; publication: string }> }, 16 16 + ) { 17 17 + console.log("are we getting here?"); 18 18 + const params = await props.params; 19 19 + try { 20 20 + let did = decodeURIComponent(params.did); 21 21 + let uri; 22 22 + if (/^(?!\.$|\.\.S)[A-Za-z0-9._:~-]{1,512}$/.test(params.publication)) { 23 23 + uri = AtUri.make( 24 24 + did, 25 25 + "pub.leaflet.publication", 26 26 + params.publication, 27 27 + ).toString(); 28 28 + } 29 29 + let { data: publication } = await supabaseServerClient 30 30 + .from("publications") 31 31 + .select( 32 32 + `*, 33 33 + publication_subscriptions(*), 34 34 + documents_in_publications(documents(*)) 35 35 + `, 36 36 + ) 37 37 + .eq("identity_did", did) 38 38 + .or(`name.eq."${params.publication}", uri.eq."${uri}"`) 39 39 + .single(); 40 40 + 41 41 + let record = publication?.record as PubLeafletPublication.Record | null; 42 42 + if (!record?.icon) return redirect("/icon.png"); 43 43 + 44 44 + let identity = await idResolver.did.resolve(did); 45 45 + let service = identity?.service?.find((f) => f.id === "#atproto_pds"); 46 46 + if (!service) return redirect("/icon.png"); 47 47 + let cid = (record.icon.ref as unknown as { $link: string })["$link"]; 48 48 + const response = await fetch( 49 49 + `${service.serviceEndpoint}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`, 50 50 + ); 51 51 + let blob = await response.blob(); 52 52 + let resizedImage = await sharp(await blob.arrayBuffer()) 53 53 + .resize({ width: 32, height: 32 }) 54 54 + .toBuffer(); 55 55 + return new Response(new Uint8Array(resizedImage), { 56 56 + headers: { 57 57 + "Content-Type": "image/png", 58 58 + "CDN-Cache-Control": "s-maxage=86400, stale-while-revalidate=86400", 59 59 + "Cache-Control": 60 60 + "public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400", 61 61 + }, 62 62 + }); 63 63 + } catch (e) { 64 64 + console.log(e); 65 65 + return redirect("/icon.png"); 66 66 + } 67 67 + }

-69

app/lish/[did]/[publication]/icon.ts

··· 1 1 - import { NextRequest } from "next/server"; 2 2 - import { IdResolver } from "@atproto/identity"; 3 3 - import { AtUri } from "@atproto/syntax"; 4 4 - import { PubLeafletPublication } from "lexicons/api"; 5 5 - import { supabaseServerClient } from "supabase/serverClient"; 6 6 - import sharp from "sharp"; 7 7 - import { redirect } from "next/navigation"; 8 8 - 9 9 - let idResolver = new IdResolver(); 10 10 - 11 11 - export const size = { 12 12 - width: 32, 13 13 - height: 32, 14 14 - }; 15 15 - 16 16 - export const contentType = "image/png"; 17 17 - export default async function Icon({ 18 18 - params, 19 19 - }: { 20 20 - params: { did: string; publication: string }; 21 21 - }) { 22 22 - try { 23 23 - let did = decodeURIComponent(params.did); 24 24 - let uri; 25 25 - if (/^(?!\.$|\.\.S)[A-Za-z0-9._:~-]{1,512}$/.test(params.publication)) { 26 26 - uri = AtUri.make( 27 27 - did, 28 28 - "pub.leaflet.publication", 29 29 - params.publication, 30 30 - ).toString(); 31 31 - } 32 32 - let { data: publication } = await supabaseServerClient 33 33 - .from("publications") 34 34 - .select( 35 35 - `*, 36 36 - publication_subscriptions(*), 37 37 - documents_in_publications(documents(*)) 38 38 - `, 39 39 - ) 40 40 - .eq("identity_did", did) 41 41 - .or(`name.eq."${params.publication}", uri.eq."${uri}"`) 42 42 - .single(); 43 43 - 44 44 - let record = publication?.record as PubLeafletPublication.Record | null; 45 45 - if (!record?.icon) return redirect("/icon.png"); 46 46 - 47 47 - let identity = await idResolver.did.resolve(did); 48 48 - let service = identity?.service?.find((f) => f.id === "#atproto_pds"); 49 49 - if (!service) return null; 50 50 - let cid = (record.icon.ref as unknown as { $link: string })["$link"]; 51 51 - const response = await fetch( 52 52 - `${service.serviceEndpoint}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`, 53 53 - ); 54 54 - let blob = await response.blob(); 55 55 - let resizedImage = await sharp(await blob.arrayBuffer()) 56 56 - .resize({ width: 32, height: 32 }) 57 57 - .toBuffer(); 58 58 - return new Response(new Uint8Array(resizedImage), { 59 59 - headers: { 60 60 - "Content-Type": "image/png", 61 61 - "CDN-Cache-Control": "s-maxage=86400, stale-while-revalidate=86400", 62 62 - "Cache-Control": 63 63 - "public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400", 64 64 - }, 65 65 - }); 66 66 - } catch (e) { 67 67 - return redirect("/icon.png"); 68 68 - } 69 69 - }

+8

app/lish/[did]/[publication]/layout.tsx

··· 47 47 title: pubRecord?.name || "Untitled Publication", 48 48 description: pubRecord?.description || "", 49 49 icons: { 50 50 + icon: { 51 51 + url: 52 52 + process.env.NODE_ENV === "development" 53 53 + ? `/lish/${did}/${publication_name}/icon` 54 54 + : "/icon", 55 55 + sizes: "32x32", 56 56 + type: "image/png", 57 57 + }, 50 58 other: { 51 59 rel: "alternate", 52 60 url: publication.uri,

+3 -2

app/lish/[did]/[publication]/opengraph-image.ts

··· 4 4 export const revalidate = 60; 5 5 6 6 export default async function OpenGraphImage(props: { 7 7 - params: { publication: string; did: string }; 7 7 + params: Promise<{ publication: string; did: string }>; 8 8 }) { 9 9 + let params = await props.params; 9 10 return getMicroLinkOgImage( 10 10 - `/lish/${encodeURIComponent(props.params.did)}/${encodeURIComponent(props.params.publication)}/`, 11 11 + `/lish/${encodeURIComponent(params.did)}/${encodeURIComponent(params.publication)}/`, 11 12 ); 12 13 }

+108 -120

app/lish/[did]/[publication]/page.tsx

··· 14 14 import { SpeedyLink } from "components/SpeedyLink"; 15 15 import { QuoteTiny } from "components/Icons/QuoteTiny"; 16 16 import { CommentTiny } from "components/Icons/CommentTiny"; 17 17 + import { InteractionPreview } from "components/InteractionsPreview"; 17 18 import { LocalizedDate } from "./LocalizedDate"; 19 19 + import { PublicationHomeLayout } from "./PublicationHomeLayout"; 18 20 19 21 export default async function Publication(props: { 20 22 params: Promise<{ publication: string; did: string }>; ··· 59 61 try { 60 62 return ( 61 63 <PublicationThemeProvider 62 62 - record={record} 64 64 + theme={record?.theme} 63 65 pub_creator={publication.identity_did} 64 66 > 65 67 <PublicationBackgroundProvider 66 66 - record={record} 68 68 + theme={record?.theme} 67 69 pub_creator={publication.identity_did} 68 70 > 69 69 - <div 70 70 - className={`pubWrapper flex flex-col sm:py-6 h-full ${showPageBackground ? "max-w-prose mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`} 71 71 + <PublicationHomeLayout 72 72 + uri={publication.uri} 73 73 + showPageBackground={!!showPageBackground} 71 74 > 72 72 - <div 73 73 - className={`pub sm:max-w-prose max-w-(--page-width-units) w-[1000px] mx-auto px-3 sm:px-4 py-5 ${showPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] border border-border rounded-lg" : "h-fit"}`} 74 74 - > 75 75 - <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center "> 76 76 - {record?.icon && ( 77 77 - <div 78 78 - className="shrink-0 w-10 h-10 rounded-full mx-auto" 79 79 - style={{ 80 80 - backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`, 81 81 - backgroundRepeat: "no-repeat", 82 82 - backgroundPosition: "center", 83 83 - backgroundSize: "cover", 84 84 - }} 85 85 - /> 86 86 - )} 87 87 - <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 "> 88 88 - {publication.name} 89 89 - </h2> 90 90 - <p className="sm:text-lg text-secondary"> 91 91 - {record?.description}{" "} 75 75 + <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center "> 76 76 + {record?.icon && ( 77 77 + <div 78 78 + className="shrink-0 w-10 h-10 rounded-full mx-auto" 79 79 + style={{ 80 80 + backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`, 81 81 + backgroundRepeat: "no-repeat", 82 82 + backgroundPosition: "center", 83 83 + backgroundSize: "cover", 84 84 + }} 85 85 + /> 86 86 + )} 87 87 + <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 "> 88 88 + {publication.name} 89 89 + </h2> 90 90 + <p className="sm:text-lg text-secondary"> 91 91 + {record?.description}{" "} 92 92 + </p> 93 93 + {profile && ( 94 94 + <p className="italic text-tertiary sm:text-base text-sm"> 95 95 + <strong className="">by {profile.displayName}</strong>{" "} 96 96 + <a 97 97 + className="text-tertiary" 98 98 + href={`https://bsky.app/profile/${profile.handle}`} 99 99 + > 100 100 + @{profile.handle} 101 101 + </a> 92 102 </p> 93 93 - {profile && ( 94 94 - <p className="italic text-tertiary sm:text-base text-sm"> 95 95 - <strong className="">by {profile.displayName}</strong>{" "} 96 96 - <a 97 97 - className="text-tertiary" 98 98 - href={`https://bsky.app/profile/${profile.handle}`} 99 99 - > 100 100 - @{profile.handle} 101 101 - </a> 102 102 - </p> 103 103 - )} 104 104 - <div className="sm:pt-4 pt-4"> 105 105 - <SubscribeWithBluesky 106 106 - base_url={getPublicationURL(publication)} 107 107 - pubName={publication.name} 108 108 - pub_uri={publication.uri} 109 109 - subscribers={publication.publication_subscriptions} 110 110 - /> 111 111 - </div> 103 103 + )} 104 104 + <div className="sm:pt-4 pt-4"> 105 105 + <SubscribeWithBluesky 106 106 + base_url={getPublicationURL(publication)} 107 107 + pubName={publication.name} 108 108 + pub_uri={publication.uri} 109 109 + subscribers={publication.publication_subscriptions} 110 110 + /> 112 111 </div> 113 113 - <div className="publicationPostList w-full flex flex-col gap-4"> 114 114 - {publication.documents_in_publications 115 115 - .filter((d) => !!d?.documents) 116 116 - .sort((a, b) => { 117 117 - let aRecord = a.documents 118 118 - ?.data! as PubLeafletDocument.Record; 119 119 - let bRecord = b.documents 120 120 - ?.data! as PubLeafletDocument.Record; 121 121 - const aDate = aRecord.publishedAt 122 122 - ? new Date(aRecord.publishedAt) 123 123 - : new Date(0); 124 124 - const bDate = bRecord.publishedAt 125 125 - ? new Date(bRecord.publishedAt) 126 126 - : new Date(0); 127 127 - return bDate.getTime() - aDate.getTime(); // Sort by most recent first 128 128 - }) 129 129 - .map((doc) => { 130 130 - if (!doc.documents) return null; 131 131 - let uri = new AtUri(doc.documents.uri); 132 132 - let doc_record = doc.documents 133 133 - .data as PubLeafletDocument.Record; 134 134 - let quotes = 135 135 - doc.documents.document_mentions_in_bsky[0].count || 0; 136 136 - let comments = 137 137 - record?.preferences?.showComments === false 138 138 - ? 0 139 139 - : doc.documents.comments_on_documents[0].count || 0; 112 112 + </div> 113 113 + <div className="publicationPostList w-full flex flex-col gap-4"> 114 114 + {publication.documents_in_publications 115 115 + .filter((d) => !!d?.documents) 116 116 + .sort((a, b) => { 117 117 + let aRecord = a.documents?.data! as PubLeafletDocument.Record; 118 118 + let bRecord = b.documents?.data! as PubLeafletDocument.Record; 119 119 + const aDate = aRecord.publishedAt 120 120 + ? new Date(aRecord.publishedAt) 121 121 + : new Date(0); 122 122 + const bDate = bRecord.publishedAt 123 123 + ? new Date(bRecord.publishedAt) 124 124 + : new Date(0); 125 125 + return bDate.getTime() - aDate.getTime(); // Sort by most recent first 126 126 + }) 127 127 + .map((doc) => { 128 128 + if (!doc.documents) return null; 129 129 + let uri = new AtUri(doc.documents.uri); 130 130 + let doc_record = doc.documents 131 131 + .data as PubLeafletDocument.Record; 132 132 + let quotes = 133 133 + doc.documents.document_mentions_in_bsky[0].count || 0; 134 134 + let comments = 135 135 + record?.preferences?.showComments === false 136 136 + ? 0 137 137 + : doc.documents.comments_on_documents[0].count || 0; 138 138 + let tags = (doc_record?.tags as string[] | undefined) || []; 140 139 141 141 - return ( 142 142 - <React.Fragment key={doc.documents?.uri}> 143 143 - <div className="flex w-full grow flex-col "> 144 144 - <SpeedyLink 145 145 - href={`${getPublicationURL(publication)}/${uri.rkey}`} 146 146 - className="publishedPost hover:no-underline! flex flex-col" 147 147 - > 148 148 - <h3 className="text-primary">{doc_record.title}</h3> 149 149 - <p className="italic text-secondary"> 150 150 - {doc_record.description} 151 151 - </p> 152 152 - </SpeedyLink> 140 140 + return ( 141 141 + <React.Fragment key={doc.documents?.uri}> 142 142 + <div className="flex w-full grow flex-col "> 143 143 + <SpeedyLink 144 144 + href={`${getPublicationURL(publication)}/${uri.rkey}`} 145 145 + className="publishedPost hover:no-underline! flex flex-col" 146 146 + > 147 147 + <h3 className="text-primary">{doc_record.title}</h3> 148 148 + <p className="italic text-secondary"> 149 149 + {doc_record.description} 150 150 + </p> 151 151 + </SpeedyLink> 153 152 154 154 - <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2"> 155 155 - <p className="text-sm text-tertiary "> 156 156 - {doc_record.publishedAt && ( 157 157 - <LocalizedDate 158 158 - dateString={doc_record.publishedAt} 159 159 - options={{ 160 160 - year: "numeric", 161 161 - month: "long", 162 162 - day: "2-digit", 163 163 - }} 164 164 - /> 165 165 - )}{" "} 166 166 - </p> 167 167 - {comments > 0 || quotes > 0 ? "| " : ""} 168 168 - {quotes > 0 && ( 169 169 - <SpeedyLink 170 170 - href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=quotes`} 171 171 - className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap" 172 172 - > 173 173 - <QuoteTiny /> {quotes} 174 174 - </SpeedyLink> 175 175 - )} 176 176 - {comments > 0 && 177 177 - record?.preferences?.showComments !== false && ( 178 178 - <SpeedyLink 179 179 - href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=comments`} 180 180 - className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap" 181 181 - > 182 182 - <CommentTiny /> {comments} 183 183 - </SpeedyLink> 184 184 - )} 185 185 - </div> 153 153 + <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2"> 154 154 + <p className="text-sm text-tertiary "> 155 155 + {doc_record.publishedAt && ( 156 156 + <LocalizedDate 157 157 + dateString={doc_record.publishedAt} 158 158 + options={{ 159 159 + year: "numeric", 160 160 + month: "long", 161 161 + day: "2-digit", 162 162 + }} 163 163 + /> 164 164 + )}{" "} 165 165 + </p> 166 166 + {comments > 0 || quotes > 0 ? "| " : ""} 167 167 + <InteractionPreview 168 168 + quotesCount={quotes} 169 169 + commentsCount={comments} 170 170 + tags={tags} 171 171 + postUrl="" 172 172 + showComments={record?.preferences?.showComments} 173 173 + /> 186 174 </div> 187 187 - <hr className="last:hidden border-border-light" /> 188 188 - </React.Fragment> 189 189 - ); 190 190 - })} 191 191 - </div> 175 175 + </div> 176 176 + <hr className="last:hidden border-border-light" /> 177 177 + </React.Fragment> 178 178 + ); 179 179 + })} 192 180 </div> 193 193 - </div> 181 181 + </PublicationHomeLayout> 194 182 </PublicationBackgroundProvider> 195 183 </PublicationThemeProvider> 196 184 );

+6 -7

app/lish/createPub/CreatePubForm.tsx

··· 127 127 onChange={(e) => setShowInDiscover(e.target.checked)} 128 128 > 129 129 <div className=" pt-0.5 flex flex-col text-sm text-tertiary "> 130 130 - <p className="font-bold italic"> 131 131 - Show In{" "} 130 130 + <p className="font-bold italic">Show In Discover</p> 131 131 + <p className="text-sm text-tertiary font-normal"> 132 132 + Your posts will appear on our{" "} 132 133 <a href="/discover" target="_blank"> 133 134 Discover 134 134 - </a> 135 135 - </p> 136 136 - <p className="text-sm text-tertiary font-normal"> 137 137 - You'll be able to change this later! 135 135 + </a>{" "} 136 136 + page. You can change this at any time! 138 137 </p> 139 138 </div> 140 139 </Checkbox> 141 140 <hr className="border-border-light" /> 142 141 143 143 - <div className="flex w-full justify-center"> 142 142 + <div className="flex w-full justify-end"> 144 143 <ButtonPrimary 145 144 type="submit" 146 145 disabled={

+5 -1

app/lish/createPub/UpdatePubForm.tsx

··· 170 170 </a> 171 171 </p> 172 172 <p className="text-xs text-tertiary font-normal"> 173 173 - This publication will appear on our public Discover page 173 173 + Your posts will appear on our{" "} 174 174 + <a href="/discover" target="_blank"> 175 175 + Discover 176 176 + </a>{" "} 177 177 + page. You can change this at any time! 174 178 </p> 175 179 </div> 176 180 </Checkbox>

+3 -11

app/lish/createPub/getPublicationURL.ts

··· 3 3 import { isProductionDomain } from "src/utils/isProductionDeployment"; 4 4 import { Json } from "supabase/database.types"; 5 5 6 6 - export function getPublicationURL(pub: { 7 7 - uri: string; 8 8 - name: string; 9 9 - record: Json; 10 10 - }) { 6 6 + export function getPublicationURL(pub: { uri: string; record: Json }) { 11 7 let record = pub.record as PubLeafletPublication.Record; 12 8 if (isProductionDomain() && record?.base_path) 13 9 return `https://${record.base_path}`; 14 10 else return getBasePublicationURL(pub); 15 11 } 16 12 17 17 - export function getBasePublicationURL(pub: { 18 18 - uri: string; 19 19 - name: string; 20 20 - record: Json; 21 21 - }) { 13 13 + export function getBasePublicationURL(pub: { uri: string; record: Json }) { 22 14 let record = pub.record as PubLeafletPublication.Record; 23 15 let aturi = new AtUri(pub.uri); 24 24 - return `/lish/${aturi.host}/${encodeURIComponent(aturi.rkey || record?.name || pub.name)}`; 16 16 + return `/lish/${aturi.host}/${encodeURIComponent(aturi.rkey || record?.name)}`; 25 17 }

+1 -1

app/lish/createPub/page.tsx

··· 26 26 <div className="createPubContent h-full flex items-center max-w-sm w-full mx-auto"> 27 27 <div className="createPubFormWrapper h-fit w-full flex flex-col gap-4"> 28 28 <h2 className="text-center">Create Your Publication!</h2> 29 29 - <div className="container w-full p-3"> 29 29 + <div className="opaque-container w-full sm:py-4 p-3"> 30 30 <CreatePubForm /> 31 31 </div> 32 32 </div>

+91

app/lish/uri/[uri]/route.ts

··· 1 1 + import { NextRequest, NextResponse } from "next/server"; 2 2 + import { AtUri } from "@atproto/api"; 3 3 + import { supabaseServerClient } from "supabase/serverClient"; 4 4 + import { PubLeafletPublication } from "lexicons/api"; 5 5 + 6 6 + /** 7 7 + * Redirect route for AT URIs (publications and documents) 8 8 + * Redirects to the actual hosted domains from publication records 9 9 + */ 10 10 + export async function GET( 11 11 + request: NextRequest, 12 12 + { params }: { params: Promise<{ uri: string }> } 13 13 + ) { 14 14 + try { 15 15 + const { uri: uriParam } = await params; 16 16 + const atUriString = decodeURIComponent(uriParam); 17 17 + const uri = new AtUri(atUriString); 18 18 + 19 19 + if (uri.collection === "pub.leaflet.publication") { 20 20 + // Get the publication record to retrieve base_path 21 21 + const { data: publication } = await supabaseServerClient 22 22 + .from("publications") 23 23 + .select("record") 24 24 + .eq("uri", atUriString) 25 25 + .single(); 26 26 + 27 27 + if (!publication?.record) { 28 28 + return new NextResponse("Publication not found", { status: 404 }); 29 29 + } 30 30 + 31 31 + const record = publication.record as PubLeafletPublication.Record; 32 32 + const basePath = record.base_path; 33 33 + 34 34 + if (!basePath) { 35 35 + return new NextResponse("Publication has no base_path", { status: 404 }); 36 36 + } 37 37 + 38 38 + // Redirect to the publication's hosted domain (temporary redirect since base_path can change) 39 39 + return NextResponse.redirect(basePath, 307); 40 40 + } else if (uri.collection === "pub.leaflet.document") { 41 41 + // Document link - need to find the publication it belongs to 42 42 + const { data: docInPub } = await supabaseServerClient 43 43 + .from("documents_in_publications") 44 44 + .select("publication, publications!inner(record)") 45 45 + .eq("document", atUriString) 46 46 + .single(); 47 47 + 48 48 + if (docInPub?.publication && docInPub.publications) { 49 49 + // Document is in a publication - redirect to domain/rkey 50 50 + const record = docInPub.publications.record as PubLeafletPublication.Record; 51 51 + const basePath = record.base_path; 52 52 + 53 53 + if (!basePath) { 54 54 + return new NextResponse("Publication has no base_path", { status: 404 }); 55 55 + } 56 56 + 57 57 + // Ensure basePath ends without trailing slash 58 58 + const cleanBasePath = basePath.endsWith("/") 59 59 + ? basePath.slice(0, -1) 60 60 + : basePath; 61 61 + 62 62 + // Redirect to the document on the publication's domain (temporary redirect since base_path can change) 63 63 + return NextResponse.redirect(`${cleanBasePath}/${uri.rkey}`, 307); 64 64 + } 65 65 + 66 66 + // If not in a publication, check if it's a standalone document 67 67 + const { data: doc } = await supabaseServerClient 68 68 + .from("documents") 69 69 + .select("uri") 70 70 + .eq("uri", atUriString) 71 71 + .single(); 72 72 + 73 73 + if (doc) { 74 74 + // Standalone document - redirect to /p/did/rkey (temporary redirect) 75 75 + return NextResponse.redirect( 76 76 + new URL(`/p/${uri.host}/${uri.rkey}`, request.url), 77 77 + 307 78 78 + ); 79 79 + } 80 80 + 81 81 + // Document not found 82 82 + return new NextResponse("Document not found", { status: 404 }); 83 83 + } 84 84 + 85 85 + // Unsupported collection type 86 86 + return new NextResponse("Unsupported URI type", { status: 400 }); 87 87 + } catch (error) { 88 88 + console.error("Error resolving AT URI:", error); 89 89 + return new NextResponse("Invalid URI", { status: 400 }); 90 90 + } 91 91 + }

+1 -1

app/login/LoginForm.tsx

··· 213 213 </ButtonPrimary> 214 214 <button 215 215 type="button" 216 216 - className={`${props.compact ? "text-xs" : "text-sm"} text-accent-contrast place-self-center mt-[6px]`} 216 216 + className={`${props.compact ? "text-xs mt-0.5" : "text-sm mt-[6px]"} text-accent-contrast place-self-center`} 217 217 onClick={() => setSigningWithHandle(true)} 218 218 > 219 219 use an ATProto handle

+20

app/p/[didOrHandle]/[rkey]/l-quote/[quote]/opengraph-image.ts

··· 1 1 + import { getMicroLinkOgImage } from "src/utils/getMicroLinkOgImage"; 2 2 + import { decodeQuotePosition } from "app/lish/[did]/[publication]/[rkey]/quotePosition"; 3 3 + 4 4 + export const runtime = "edge"; 5 5 + export const revalidate = 60; 6 6 + 7 7 + export default async function OpenGraphImage(props: { 8 8 + params: Promise<{ didOrHandle: string; rkey: string; quote: string }>; 9 9 + }) { 10 10 + let params = await props.params; 11 11 + let quotePosition = decodeQuotePosition(params.quote); 12 12 + return getMicroLinkOgImage( 13 13 + `/p/${decodeURIComponent(params.didOrHandle)}/${params.rkey}/l-quote/${params.quote}#${quotePosition?.pageId ? `${quotePosition.pageId}~` : ""}${quotePosition?.start.block.join(".")}_${quotePosition?.start.offset}`, 14 14 + { 15 15 + width: 620, 16 16 + height: 324, 17 17 + deviceScaleFactor: 2, 18 18 + }, 19 19 + ); 20 20 + }

+8

app/p/[didOrHandle]/[rkey]/l-quote/[quote]/page.tsx

··· 1 1 + import PostPage from "app/p/[didOrHandle]/[rkey]/page"; 2 2 + 3 3 + export { generateMetadata } from "app/p/[didOrHandle]/[rkey]/page"; 4 4 + export default async function Post(props: { 5 5 + params: Promise<{ didOrHandle: string; rkey: string }>; 6 6 + }) { 7 7 + return <PostPage {...props} />; 8 8 + }

+13

app/p/[didOrHandle]/[rkey]/opengraph-image.ts

··· 1 1 + import { getMicroLinkOgImage } from "src/utils/getMicroLinkOgImage"; 2 2 + 3 3 + export const runtime = "edge"; 4 4 + export const revalidate = 60; 5 5 + 6 6 + export default async function OpenGraphImage(props: { 7 7 + params: Promise<{ rkey: string; didOrHandle: string }>; 8 8 + }) { 9 9 + let params = await props.params; 10 10 + return getMicroLinkOgImage( 11 11 + `/p/${params.didOrHandle}/${params.rkey}/`, 12 12 + ); 13 13 + }

+90

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

··· 1 1 + import { supabaseServerClient } from "supabase/serverClient"; 2 2 + import { AtUri } from "@atproto/syntax"; 3 3 + import { ids } from "lexicons/api/lexicons"; 4 4 + import { PubLeafletDocument } from "lexicons/api"; 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 + 9 9 + export async function generateMetadata(props: { 10 10 + params: Promise<{ didOrHandle: string; rkey: string }>; 11 11 + }): Promise<Metadata> { 12 12 + let params = await props.params; 13 13 + let didOrHandle = decodeURIComponent(params.didOrHandle); 14 14 + 15 15 + // Resolve handle to DID if necessary 16 16 + let did = didOrHandle; 17 17 + if (!didOrHandle.startsWith("did:")) { 18 18 + try { 19 19 + let resolved = await idResolver.handle.resolve(didOrHandle); 20 20 + if (resolved) did = resolved; 21 21 + } catch (e) { 22 22 + return { title: "404" }; 23 23 + } 24 24 + } 25 25 + 26 26 + let { data: document } = await supabaseServerClient 27 27 + .from("documents") 28 28 + .select("*, documents_in_publications(publications(*))") 29 29 + .eq("uri", AtUri.make(did, ids.PubLeafletDocument, params.rkey)) 30 30 + .single(); 31 31 + 32 32 + if (!document) return { title: "404" }; 33 33 + 34 34 + let docRecord = document.data as PubLeafletDocument.Record; 35 35 + 36 36 + // For documents in publications, include publication name 37 37 + let publicationName = document.documents_in_publications[0]?.publications?.name; 38 38 + 39 39 + return { 40 40 + icons: { 41 41 + other: { 42 42 + rel: "alternate", 43 43 + url: document.uri, 44 44 + }, 45 45 + }, 46 46 + title: publicationName 47 47 + ? `${docRecord.title} - ${publicationName}` 48 48 + : docRecord.title, 49 49 + description: docRecord?.description || "", 50 50 + }; 51 51 + } 52 52 + 53 53 + export default async function StandaloneDocumentPage(props: { 54 54 + params: Promise<{ didOrHandle: string; rkey: string }>; 55 55 + }) { 56 56 + let params = await props.params; 57 57 + let didOrHandle = decodeURIComponent(params.didOrHandle); 58 58 + 59 59 + // Resolve handle to DID if necessary 60 60 + let did = didOrHandle; 61 61 + if (!didOrHandle.startsWith("did:")) { 62 62 + try { 63 63 + let resolved = await idResolver.handle.resolve(didOrHandle); 64 64 + if (!resolved) { 65 65 + return ( 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> 68 68 + <p> 69 69 + This may be a glitch on our end. If the issue persists please{" "} 70 70 + <a href="mailto:contact@leaflet.pub">send us a note</a>. 71 71 + </p> 72 72 + </div> 73 73 + ); 74 74 + } 75 75 + did = resolved; 76 76 + } catch (e) { 77 77 + return ( 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> 80 80 + <p> 81 81 + This may be a glitch on our end. If the issue persists please{" "} 82 82 + <a href="mailto:contact@leaflet.pub">send us a note</a>. 83 83 + </p> 84 84 + </div> 85 85 + ); 86 86 + } 87 87 + } 88 88 + 89 89 + return <DocumentPageRenderer did={did} rkey={params.rkey} />; 90 90 + }

+20 -17

appview/index.ts

··· 104 104 data: record.value as Json, 105 105 }); 106 106 if (docResult.error) console.log(docResult.error); 107 107 - let publicationURI = new AtUri(record.value.publication); 107 107 + if (record.value.publication) { 108 108 + let publicationURI = new AtUri(record.value.publication); 109 109 + 110 110 + if (publicationURI.host !== evt.uri.host) { 111 111 + console.log("Unauthorized to create post!"); 112 112 + return; 113 113 + } 114 114 + let docInPublicationResult = await supabase 115 115 + .from("documents_in_publications") 116 116 + .upsert({ 117 117 + publication: record.value.publication, 118 118 + document: evt.uri.toString(), 119 119 + }); 120 120 + await supabase 121 121 + .from("documents_in_publications") 122 122 + .delete() 123 123 + .neq("publication", record.value.publication) 124 124 + .eq("document", evt.uri.toString()); 108 125 109 109 - if (publicationURI.host !== evt.uri.host) { 110 110 - console.log("Unauthorized to create post!"); 111 111 - return; 126 126 + if (docInPublicationResult.error) 127 127 + console.log(docInPublicationResult.error); 112 128 } 113 113 - let docInPublicationResult = await supabase 114 114 - .from("documents_in_publications") 115 115 - .upsert({ 116 116 - publication: record.value.publication, 117 117 - document: evt.uri.toString(), 118 118 - }); 119 119 - await supabase 120 120 - .from("documents_in_publications") 121 121 - .delete() 122 122 - .neq("publication", record.value.publication) 123 123 - .eq("document", evt.uri.toString()); 124 124 - if (docInPublicationResult.error) 125 125 - console.log(docInPublicationResult.error); 126 129 } 127 130 if (evt.event === "delete") { 128 131 await supabase.from("documents").delete().eq("uri", evt.uri.toString());

+1 -1

components/ActionBar/ActionButton.tsx

··· 3 3 import { useContext, useEffect } from "react"; 4 4 import { SidebarContext } from "./Sidebar"; 5 5 import React, { forwardRef, type JSX } from "react"; 6 6 - import { PopoverOpenContext } from "components/Popover"; 6 6 + import { PopoverOpenContext } from "components/Popover/PopoverContext"; 7 7 8 8 type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">; 9 9

+15 -12

components/ActionBar/Navigation.tsx

··· 18 18 import { SpeedyLink } from "components/SpeedyLink"; 19 19 import { Separator } from "components/Layout"; 20 20 21 21 - export type navPages = "home" | "reader" | "pub" | "discover" | "notifications"; 21 21 + export type navPages = 22 22 + | "home" 23 23 + | "reader" 24 24 + | "pub" 25 25 + | "discover" 26 26 + | "notifications" 27 27 + | "looseleafs" 28 28 + | "tag"; 22 29 23 30 export const DesktopNavigation = (props: { 24 31 currentPage: navPages; ··· 47 54 publication?: string; 48 55 }) => { 49 56 let { identity } = useIdentityData(); 50 50 - let thisPublication = identity?.publications?.find( 51 51 - (pub) => pub.uri === props.publication, 52 52 - ); 57 57 + 53 58 return ( 54 59 <div className="flex gap-1 "> 55 60 <Popover ··· 100 105 <DiscoverButton current={props.currentPage === "discover"} /> 101 106 102 107 <hr className="border-border-light my-1" /> 103 103 - <PublicationButtons currentPubUri={thisPublication?.uri} /> 108 108 + <PublicationButtons 109 109 + currentPage={props.currentPage} 110 110 + currentPubUri={thisPublication?.uri} 111 111 + /> 104 112 </> 105 113 ); 106 114 }; ··· 119 127 }; 120 128 121 129 const ReaderButton = (props: { current?: boolean; subs: boolean }) => { 122 122 - let readerUnreads = false; 123 123 - 124 130 if (!props.subs) return; 125 131 return ( 126 132 <SpeedyLink href={"/reader"} className="hover:no-underline!"> 127 133 <ActionButton 128 134 nav 129 129 - icon={readerUnreads ? <ReaderUnreadSmall /> : <ReaderReadSmall />} 135 135 + icon={<ReaderUnreadSmall />} 130 136 label="Reader" 131 131 - className={` 132 132 - ${readerUnreads && "text-accent-contrast!"} 133 133 - ${props.current && "border-accent-contrast!"} 134 134 - `} 137 137 + className={props.current ? "bg-bg-page! border-border-light!" : ""} 135 138 /> 136 139 </SpeedyLink> 137 140 );

+48 -24

components/ActionBar/Publications.tsx

··· 12 12 import { PublishSmall } from "components/Icons/PublishSmall"; 13 13 import { Popover } from "components/Popover"; 14 14 import { BlueskyLogin } from "app/login/LoginForm"; 15 15 - import { ButtonPrimary } from "components/Buttons"; 15 15 + import { ButtonSecondary } from "components/Buttons"; 16 16 import { useIsMobile } from "src/hooks/isMobile"; 17 17 import { useState } from "react"; 18 18 + import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; 19 19 + import { navPages } from "./Navigation"; 18 20 19 21 export const PublicationButtons = (props: { 22 22 + currentPage: navPages; 20 23 currentPubUri: string | undefined; 21 24 }) => { 22 25 let { identity } = useIdentityData(); 26 26 + let hasLooseleafs = !!identity?.permission_token_on_homepage.find( 27 27 + (f) => 28 28 + f.permission_tokens.leaflets_to_documents && 29 29 + f.permission_tokens.leaflets_to_documents[0]?.document, 30 30 + ); 23 31 24 32 // don't show pub list button if not logged in or no pub list 25 33 // we show a "start a pub" banner instead 26 34 if (!identity || !identity.atp_did || identity.publications.length === 0) 27 35 return <PubListEmpty />; 36 36 + 28 37 return ( 29 38 <div className="pubListWrapper w-full flex flex-col gap-1 sm:bg-transparent sm:border-0"> 39 39 + {hasLooseleafs && ( 40 40 + <> 41 41 + <SpeedyLink 42 42 + href={`/looseleafs`} 43 43 + className="flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full" 44 44 + > 45 45 + {/*TODO How should i get if this is the current page or not? 46 46 + theres not "pub" to check the uri for. Do i need to add it as an option to NavPages? thats kinda annoying*/} 47 47 + <ActionButton 48 48 + label="Looseleafs" 49 49 + icon={<LooseLeafSmall />} 50 50 + nav 51 51 + className={ 52 52 + props.currentPage === "looseleafs" 53 53 + ? "bg-bg-page! border-border!" 54 54 + : "" 55 55 + } 56 56 + /> 57 57 + </SpeedyLink> 58 58 + <hr className="border-border-light border-dashed mx-1" /> 59 59 + </> 60 60 + )} 61 61 + 30 62 {identity.publications?.map((d) => { 31 63 return ( 32 64 <PublicationOption 33 65 {...d} 34 66 key={d.uri} 35 67 record={d.record} 36 36 - asActionButton 37 68 current={d.uri === props.currentPubUri} 38 69 /> 39 70 ); ··· 52 83 uri: string; 53 84 name: string; 54 85 record: Json; 55 55 - asActionButton?: boolean; 56 86 current?: boolean; 57 87 }) => { 58 88 let record = props.record as PubLeafletPublication.Record | null; ··· 63 93 href={`${getBasePublicationURL(props)}/dashboard`} 64 94 className="flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full" 65 95 > 66 66 - {props.asActionButton ? ( 67 67 - <ActionButton 68 68 - label={record.name} 69 69 - icon={<PubIcon record={record} uri={props.uri} />} 70 70 - nav 71 71 - className={props.current ? "bg-bg-page! border-border!" : ""} 72 72 - /> 73 73 - ) : ( 74 74 - <> 75 75 - <PubIcon record={record} uri={props.uri} /> 76 76 - <div className="truncate">{record.name}</div> 77 77 - </> 78 78 - )} 96 96 + <ActionButton 97 97 + label={record.name} 98 98 + icon={<PubIcon record={record} uri={props.uri} />} 99 99 + nav 100 100 + className={props.current ? "bg-bg-page! border-border!" : ""} 101 101 + /> 79 102 </SpeedyLink> 80 103 ); 81 104 }; 82 105 83 106 const PubListEmpty = () => { 84 84 - let { identity } = useIdentityData(); 85 107 let isMobile = useIsMobile(); 86 108 87 109 let [state, setState] = useState<"default" | "info">("default"); ··· 98 120 /> 99 121 ); 100 122 101 101 - if (isMobile && state === "info") return <PublishPopoverContent />; 123 123 + if (isMobile && state === "info") return <PubListEmptyContent />; 102 124 else 103 125 return ( 104 126 <Popover ··· 115 137 /> 116 138 } 117 139 > 118 118 - <PublishPopoverContent /> 140 140 + <PubListEmptyContent /> 119 141 </Popover> 120 142 ); 121 143 }; 122 144 123 123 - const PublishPopoverContent = () => { 145 145 + export const PubListEmptyContent = (props: { compact?: boolean }) => { 124 146 let { identity } = useIdentityData(); 125 147 126 148 return ( 127 127 - <div className="bg-[var(--accent-light)] w-full rounded-md flex flex-col text-center justify-center p-2 pb-4 text-sm"> 149 149 + <div 150 150 + className={`bg-[var(--accent-light)] w-full rounded-md flex flex-col text-center justify-center p-2 pb-4 text-sm`} 151 151 + > 128 152 <div className="mx-auto pt-2 scale-90"> 129 153 <PubListEmptyIllo /> 130 154 </div> ··· 137 161 on AT Proto 138 162 </div> 139 163 <SpeedyLink href={`lish/createPub`} className=" hover:no-underline!"> 140 140 - <ButtonPrimary className="text-sm mx-auto" compact> 164 164 + <ButtonSecondary className="text-sm mx-auto" compact> 141 165 Start a Publication! 142 142 - </ButtonPrimary> 166 166 + </ButtonSecondary> 143 167 </SpeedyLink> 144 168 </> 145 169 ) : ( 146 170 // no ATProto account and no pubs 147 171 <> 148 172 <div className="pb-2 text-secondary text-xs"> 149 149 - Link a Bluesky account to start a new publication on AT Proto 173 173 + Link a Bluesky account to start <br /> a new publication on AT Proto 150 174 </div> 151 175 152 176 <BlueskyLogin compact />

+46

components/AtMentionLink.tsx

··· 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { atUriToUrl } from "src/utils/mentionUtils"; 3 3 + 4 4 + /** 5 5 + * Component for rendering at-uri mentions (publications and documents) as clickable links. 6 6 + * NOTE: This component's styling and behavior should match the ProseMirror schema rendering 7 7 + * in components/Blocks/TextBlock/schema.ts (atMention mark). If you update one, update the other. 8 8 + */ 9 9 + export function AtMentionLink({ 10 10 + atURI, 11 11 + children, 12 12 + className = "", 13 13 + }: { 14 14 + atURI: string; 15 15 + children: React.ReactNode; 16 16 + className?: string; 17 17 + }) { 18 18 + const aturi = new AtUri(atURI); 19 19 + const isPublication = aturi.collection === "pub.leaflet.publication"; 20 20 + const isDocument = aturi.collection === "pub.leaflet.document"; 21 21 + 22 22 + // Show publication icon if available 23 23 + const icon = 24 24 + isPublication || isDocument ? ( 25 25 + <img 26 26 + src={`/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`} 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" 31 31 + loading="lazy" 32 32 + /> 33 33 + ) : null; 34 34 + 35 35 + return ( 36 36 + <a 37 37 + href={atUriToUrl(atURI)} 38 38 + target="_blank" 39 39 + rel="noopener noreferrer" 40 40 + className={`text-accent-contrast hover:underline cursor-pointer ${isPublication ? "font-bold" : ""} ${isDocument ? "italic" : ""} ${className}`} 41 41 + > 42 42 + {icon} 43 43 + {children} 44 44 + </a> 45 45 + ); 46 46 + }

+43 -6

components/Blocks/BaseTextareaBlock.tsx

··· 5 5 import { BlockProps } from "./Block"; 6 6 import { getCoordinatesInTextarea } from "src/utils/getCoordinatesInTextarea"; 7 7 import { focusBlock } from "src/utils/focusBlock"; 8 8 + import { generateKeyBetween } from "fractional-indexing"; 9 9 + import { v7 } from "uuid"; 10 10 + import { elementId } from "src/utils/elementId"; 11 11 + import { Replicache } from "replicache"; 12 12 + import { ReplicacheMutators } from "src/replicache"; 8 13 9 9 - export function BaseTextareaBlock( 10 10 - props: AutosizeTextareaProps & { 11 11 - block: Pick<BlockProps, "previousBlock" | "nextBlock">; 12 12 - }, 13 13 - ) { 14 14 - let { block, ...passDownProps } = props; 14 14 + type BaseTextareaBlockProps = AutosizeTextareaProps & { 15 15 + block: Pick< 16 16 + BlockProps, 17 17 + "previousBlock" | "nextBlock" | "parent" | "position" | "nextPosition" 18 18 + >; 19 19 + rep?: Replicache<ReplicacheMutators> | null; 20 20 + permissionSet?: string; 21 21 + }; 22 22 + 23 23 + export function BaseTextareaBlock(props: BaseTextareaBlockProps) { 24 24 + let { block, rep, permissionSet, ...passDownProps } = props; 15 25 return ( 16 26 <AsyncValueAutosizeTextarea 17 27 {...passDownProps} 18 28 noWrap 19 29 onKeyDown={(e) => { 30 30 + // Shift-Enter or Ctrl-Enter: create new text block below and focus it 31 31 + if ( 32 32 + (e.shiftKey || e.ctrlKey || e.metaKey) && 33 33 + e.key === "Enter" && 34 34 + rep && 35 35 + permissionSet 36 36 + ) { 37 37 + e.preventDefault(); 38 38 + let newEntityID = v7(); 39 39 + rep.mutate.addBlock({ 40 40 + parent: block.parent, 41 41 + type: "text", 42 42 + factID: v7(), 43 43 + permission_set: permissionSet, 44 44 + position: generateKeyBetween( 45 45 + block.position, 46 46 + block.nextPosition || null, 47 47 + ), 48 48 + newEntityID, 49 49 + }); 50 50 + 51 51 + setTimeout(() => { 52 52 + document.getElementById(elementId.block(newEntityID).text)?.focus(); 53 53 + }, 10); 54 54 + return true; 55 55 + } 56 56 + 20 57 if (e.key === "ArrowUp") { 21 58 let selection = e.currentTarget.selectionStart; 22 59

+4 -2

components/Blocks/BlockCommandBar.tsx

··· 37 37 const clearCommandSearchText = () => { 38 38 if (!props.entityID) return; 39 39 const entityID = props.entityID; 40 40 - 40 40 + 41 41 const existingState = useEditorStates.getState().editorStates[entityID]; 42 42 if (!existingState) return; 43 43 ··· 69 69 setHighlighted(commandResults[0].name); 70 70 } 71 71 }, [commandResults, setHighlighted, highlighted]); 72 72 + 72 73 useEffect(() => { 73 74 let listener = async (e: KeyboardEvent) => { 74 75 let reverseDir = ref.current?.dataset.side === "top"; ··· 118 119 return; 119 120 } 120 121 }; 122 122 + 121 123 window.addEventListener("keydown", listener); 122 124 123 125 return () => window.removeEventListener("keydown", listener); ··· 200 202 201 203 return ( 202 204 <button 203 203 - className={`commandResult text-left flex gap-2 mx-1 pr-2 py-0.5 rounded-md text-secondary ${isHighlighted && "bg-border-light"}`} 205 205 + className={`commandResult menuItem text-secondary font-normal! py-0.5! mx-1 pl-0! ${isHighlighted && "bg-[var(--accent-light)]!"}`} 204 206 onMouseOver={() => { 205 207 props.setHighlighted(props.name); 206 208 }}

+13 -4

components/Blocks/BlockCommands.tsx

··· 2 2 import { useUIState } from "src/useUIState"; 3 3 4 4 import { generateKeyBetween } from "fractional-indexing"; 5 5 - import { focusPage } from "components/Pages"; 5 5 + import { focusPage } from "src/utils/focusPage"; 6 6 import { v7 } from "uuid"; 7 7 import { Replicache } from "replicache"; 8 8 import { useEditorStates } from "src/state/useEditorState"; 9 9 import { elementId } from "src/utils/elementId"; 10 10 import { UndoManager } from "src/undoManager"; 11 11 import { focusBlock } from "src/utils/focusBlock"; 12 12 - import { usePollBlockUIState } from "./PollBlock"; 13 13 - import { focusElement } from "components/Input"; 12 12 + import { usePollBlockUIState } from "./PollBlock/pollBlockState"; 13 13 + import { focusElement } from "src/utils/focusElement"; 14 14 import { BlockBlueskySmall } from "components/Icons/BlockBlueskySmall"; 15 15 import { BlockButtonSmall } from "components/Icons/BlockButtonSmall"; 16 16 import { BlockCalendarSmall } from "components/Icons/BlockCalendarSmall"; ··· 32 32 import { BlockMathSmall } from "components/Icons/BlockMathSmall"; 33 33 import { BlockCodeSmall } from "components/Icons/BlockCodeSmall"; 34 34 import { QuoteSmall } from "components/Icons/QuoteSmall"; 35 35 + import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage"; 35 36 36 37 type Props = { 37 38 parent: string; ··· 310 311 type: "block", 311 312 hiddenInPublication: false, 312 313 onSelect: async (rep, props) => { 313 313 - createBlockWithType(rep, props, "code"); 314 314 + let entity = await createBlockWithType(rep, props, "code"); 315 315 + let lastLang = localStorage.getItem(LAST_USED_CODE_LANGUAGE_KEY); 316 316 + if (lastLang) { 317 317 + await rep.mutate.assertFact({ 318 318 + entity, 319 319 + attribute: "block/code-language", 320 320 + data: { type: "string", value: lastLang }, 321 321 + }); 322 322 + } 314 323 }, 315 324 }, 316 325

+6 -1

components/Blocks/CodeBlock.tsx

··· 13 13 import { useEntitySetContext } from "components/EntitySetProvider"; 14 14 import { flushSync } from "react-dom"; 15 15 import { elementId } from "src/utils/elementId"; 16 16 + import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage"; 16 17 17 18 export function CodeBlock(props: BlockProps) { 18 19 let { rep, rootEntity } = useReplicache(); ··· 25 26 let focusedBlock = useUIState( 26 27 (s) => s.focusedEntity?.entityID === props.entityID, 27 28 ); 28 28 - let { permissions } = useEntitySetContext(); 29 29 + let entity_set = useEntitySetContext(); 30 30 + let { permissions } = entity_set; 29 31 const [html, setHTML] = useState<string | null>(null); 30 32 31 33 useLayoutEffect(() => { ··· 100 102 }} 101 103 value={lang} 102 104 onChange={async (e) => { 105 105 + localStorage.setItem(LAST_USED_CODE_LANGUAGE_KEY, e.target.value); 103 106 await rep?.mutate.assertFact({ 104 107 attribute: "block/code-language", 105 108 entity: props.entityID, ··· 123 126 data-entityid={props.entityID} 124 127 id={elementId.block(props.entityID).input} 125 128 block={props} 129 129 + rep={rep} 130 130 + permissionSet={entity_set.set} 126 131 spellCheck={false} 127 132 autoCapitalize="none" 128 133 autoCorrect="off"

+2 -120

components/Blocks/DeleteBlock.tsx

··· 1 1 - import { 2 2 - Fact, 3 3 - ReplicacheMutators, 4 4 - useEntity, 5 5 - useReplicache, 6 6 - } from "src/replicache"; 7 7 - import { Replicache } from "replicache"; 8 8 - import { useUIState } from "src/useUIState"; 9 9 - import { scanIndex } from "src/replicache/utils"; 10 10 - import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 11 11 - import { focusBlock } from "src/utils/focusBlock"; 1 1 + import { Fact, useReplicache } from "src/replicache"; 12 2 import { ButtonPrimary } from "components/Buttons"; 13 3 import { CloseTiny } from "components/Icons/CloseTiny"; 4 4 + import { deleteBlock } from "src/utils/deleteBlock"; 14 5 15 6 export const AreYouSure = (props: { 16 7 entityID: string[] | string; ··· 82 73 ); 83 74 }; 84 75 85 85 - export async function deleteBlock( 86 86 - entities: string[], 87 87 - rep: Replicache<ReplicacheMutators>, 88 88 - ) { 89 89 - // get what pagess we need to close as a result of deleting this block 90 90 - let pagesToClose = [] as string[]; 91 91 - for (let entity of entities) { 92 92 - let [type] = await rep.query((tx) => 93 93 - scanIndex(tx).eav(entity, "block/type"), 94 94 - ); 95 95 - if (type.data.value === "card") { 96 96 - let [childPages] = await rep?.query( 97 97 - (tx) => scanIndex(tx).eav(entity, "block/card") || [], 98 98 - ); 99 99 - pagesToClose = [childPages?.data.value]; 100 100 - } 101 101 - if (type.data.value === "mailbox") { 102 102 - let [archive] = await rep?.query( 103 103 - (tx) => scanIndex(tx).eav(entity, "mailbox/archive") || [], 104 104 - ); 105 105 - let [draft] = await rep?.query( 106 106 - (tx) => scanIndex(tx).eav(entity, "mailbox/draft") || [], 107 107 - ); 108 108 - pagesToClose = [archive?.data.value, draft?.data.value]; 109 109 - } 110 110 - } 111 111 - 112 112 - // the next and previous blocks in the block list 113 113 - // if the focused thing is a page and not a block, return 114 114 - let focusedBlock = useUIState.getState().focusedEntity; 115 115 - let parent = 116 116 - focusedBlock?.entityType === "page" 117 117 - ? focusedBlock.entityID 118 118 - : focusedBlock?.parent; 119 119 - 120 120 - if (parent) { 121 121 - let parentType = await rep?.query((tx) => 122 122 - scanIndex(tx).eav(parent, "page/type"), 123 123 - ); 124 124 - if (parentType[0]?.data.value === "canvas") { 125 125 - useUIState 126 126 - .getState() 127 127 - .setFocusedBlock({ entityType: "page", entityID: parent }); 128 128 - useUIState.getState().setSelectedBlocks([]); 129 129 - } else { 130 130 - let siblings = 131 131 - (await rep?.query((tx) => getBlocksWithType(tx, parent))) || []; 132 132 - 133 133 - let selectedBlocks = useUIState.getState().selectedBlocks; 134 134 - let firstSelected = selectedBlocks[0]; 135 135 - let lastSelected = selectedBlocks[entities.length - 1]; 136 136 - 137 137 - let prevBlock = 138 138 - siblings?.[ 139 139 - siblings.findIndex((s) => s.value === firstSelected?.value) - 1 140 140 - ]; 141 141 - let prevBlockType = await rep?.query((tx) => 142 142 - scanIndex(tx).eav(prevBlock?.value, "block/type"), 143 143 - ); 144 144 - 145 145 - let nextBlock = 146 146 - siblings?.[ 147 147 - siblings.findIndex((s) => s.value === lastSelected.value) + 1 148 148 - ]; 149 149 - let nextBlockType = await rep?.query((tx) => 150 150 - scanIndex(tx).eav(nextBlock?.value, "block/type"), 151 151 - ); 152 152 - 153 153 - if (prevBlock) { 154 154 - useUIState.getState().setSelectedBlock({ 155 155 - value: prevBlock.value, 156 156 - parent: prevBlock.parent, 157 157 - }); 158 158 - 159 159 - focusBlock( 160 160 - { 161 161 - value: prevBlock.value, 162 162 - type: prevBlockType?.[0].data.value, 163 163 - parent: prevBlock.parent, 164 164 - }, 165 165 - { type: "end" }, 166 166 - ); 167 167 - } else { 168 168 - useUIState.getState().setSelectedBlock({ 169 169 - value: nextBlock.value, 170 170 - parent: nextBlock.parent, 171 171 - }); 172 172 - 173 173 - focusBlock( 174 174 - { 175 175 - value: nextBlock.value, 176 176 - type: nextBlockType?.[0]?.data.value, 177 177 - parent: nextBlock.parent, 178 178 - }, 179 179 - { type: "start" }, 180 180 - ); 181 181 - } 182 182 - } 183 183 - } 184 184 - 185 185 - pagesToClose.forEach((page) => page && useUIState.getState().closePage(page)); 186 186 - await Promise.all( 187 187 - entities.map((entity) => 188 188 - rep?.mutate.removeBlock({ 189 189 - blockEntity: entity, 190 190 - }), 191 191 - ), 192 192 - ); 193 193 - }

+65 -16

components/Blocks/EmbedBlock.tsx

··· 10 10 import { Input } from "components/Input"; 11 11 import { isUrl } from "src/utils/isURL"; 12 12 import { elementId } from "src/utils/elementId"; 13 13 - import { deleteBlock } from "./DeleteBlock"; 14 13 import { focusBlock } from "src/utils/focusBlock"; 15 14 import { useDrag } from "src/hooks/useDrag"; 16 15 import { BlockEmbedSmall } from "components/Icons/BlockEmbedSmall"; 17 16 import { CheckTiny } from "components/Icons/CheckTiny"; 17 17 + import { DotLoader } from "components/utils/DotLoader"; 18 18 + import { 19 19 + LinkPreviewBody, 20 20 + LinkPreviewMetadataResult, 21 21 + } from "app/api/link_previews/route"; 18 22 19 23 export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => { 20 24 let { permissions } = useEntitySetContext(); ··· 132 136 133 137 let entity_set = useEntitySetContext(); 134 138 let [linkValue, setLinkValue] = useState(""); 139 139 + let [loading, setLoading] = useState(false); 135 140 let { rep } = useReplicache(); 136 141 let submit = async () => { 137 142 let entity = props.entityID; ··· 149 154 } 150 155 let link = linkValue; 151 156 if (!linkValue.startsWith("http")) link = `https://${linkValue}`; 152 152 - // these mutations = simpler subset of addLinkBlock 153 157 if (!rep) return; 154 154 - await rep.mutate.assertFact({ 155 155 - entity: entity, 156 156 - attribute: "block/type", 157 157 - data: { type: "block-type-union", value: "embed" }, 158 158 - }); 159 159 - await rep?.mutate.assertFact({ 160 160 - entity: entity, 161 161 - attribute: "embed/url", 162 162 - data: { 163 163 - type: "string", 164 164 - value: link, 165 165 - }, 166 166 - }); 158 158 + 159 159 + // Try to get embed URL from iframely, fallback to direct URL 160 160 + setLoading(true); 161 161 + try { 162 162 + let res = await fetch("/api/link_previews", { 163 163 + headers: { "Content-Type": "application/json" }, 164 164 + method: "POST", 165 165 + body: JSON.stringify({ url: link, type: "meta" } as LinkPreviewBody), 166 166 + }); 167 167 + 168 168 + let embedUrl = link; 169 169 + let embedHeight = 360; 170 170 + 171 171 + if (res.status === 200) { 172 172 + let data = await (res.json() as LinkPreviewMetadataResult); 173 173 + if (data.success && data.data.links?.player?.[0]) { 174 174 + let embed = data.data.links.player[0]; 175 175 + embedUrl = embed.href; 176 176 + embedHeight = embed.media?.height || 300; 177 177 + } 178 178 + } 179 179 + 180 180 + await rep.mutate.assertFact([ 181 181 + { 182 182 + entity: entity, 183 183 + attribute: "embed/url", 184 184 + data: { 185 185 + type: "string", 186 186 + value: embedUrl, 187 187 + }, 188 188 + }, 189 189 + { 190 190 + entity: entity, 191 191 + attribute: "embed/height", 192 192 + data: { 193 193 + type: "number", 194 194 + value: embedHeight, 195 195 + }, 196 196 + }, 197 197 + ]); 198 198 + } catch { 199 199 + // On any error, fallback to using the URL directly 200 200 + await rep.mutate.assertFact([ 201 201 + { 202 202 + entity: entity, 203 203 + attribute: "embed/url", 204 204 + data: { 205 205 + type: "string", 206 206 + value: link, 207 207 + }, 208 208 + }, 209 209 + ]); 210 210 + } finally { 211 211 + setLoading(false); 212 212 + } 167 213 }; 168 214 let smoker = useSmoker(); 169 215 ··· 171 217 <form 172 218 onSubmit={(e) => { 173 219 e.preventDefault(); 220 220 + if (loading) return; 174 221 let rect = document 175 222 .getElementById("embed-block-submit") 176 223 ?.getBoundingClientRect(); ··· 212 259 <button 213 260 type="submit" 214 261 id="embed-block-submit" 262 262 + disabled={loading} 215 263 className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`} 216 264 onMouseDown={(e) => { 217 265 e.preventDefault(); 266 266 + if (loading) return; 218 267 if (!linkValue || linkValue === "") { 219 268 smoker({ 220 269 error: true, ··· 234 283 submit(); 235 284 }} 236 285 > 237 237 - <CheckTiny /> 286 286 + {loading ? <DotLoader /> : <CheckTiny />} 238 287 </button> 239 288 </div> 240 289 </form>

+2 -1

components/Blocks/ExternalLinkBlock.tsx

··· 8 8 import { v7 } from "uuid"; 9 9 import { useSmoker } from "components/Toast"; 10 10 import { Separator } from "components/Layout"; 11 11 - import { focusElement, Input } from "components/Input"; 11 11 + import { Input } from "components/Input"; 12 12 + import { focusElement } from "src/utils/focusElement"; 12 13 import { isUrl } from "src/utils/isURL"; 13 14 import { elementId } from "src/utils/elementId"; 14 15 import { focusBlock } from "src/utils/focusBlock";

+1 -1

components/Blocks/MailboxBlock.tsx

··· 9 9 import { useEntitySetContext } from "components/EntitySetProvider"; 10 10 import { subscribeToMailboxWithEmail } from "actions/subscriptions/subscribeToMailboxWithEmail"; 11 11 import { confirmEmailSubscription } from "actions/subscriptions/confirmEmailSubscription"; 12 12 - import { focusPage } from "components/Pages"; 12 12 + import { focusPage } from "src/utils/focusPage"; 13 13 import { v7 } from "uuid"; 14 14 import { sendPostToSubscribers } from "actions/subscriptions/sendPostToSubscribers"; 15 15 import { getBlocksWithType } from "src/hooks/queries/useBlocks";

+1 -1

components/Blocks/PageLinkBlock.tsx

··· 2 2 import { BlockProps, BaseBlock, ListMarker, Block } from "./Block"; 3 3 import { focusBlock } from "src/utils/focusBlock"; 4 4 5 5 - import { focusPage } from "components/Pages"; 5 5 + import { focusPage } from "src/utils/focusPage"; 6 6 import { useEntity, useReplicache } from "src/replicache"; 7 7 import { useUIState } from "src/useUIState"; 8 8 import { RenderedTextBlock } from "components/Blocks/TextBlock";

+501

components/Blocks/PollBlock/index.tsx

··· 1 1 + import { useUIState } from "src/useUIState"; 2 2 + import { BlockProps } from "../Block"; 3 3 + import { ButtonPrimary, ButtonSecondary } from "components/Buttons"; 4 4 + import { useCallback, useEffect, useState } from "react"; 5 5 + import { Input } from "components/Input"; 6 6 + import { focusElement } from "src/utils/focusElement"; 7 7 + import { Separator } from "components/Layout"; 8 8 + import { useEntitySetContext } from "components/EntitySetProvider"; 9 9 + import { theme } from "tailwind.config"; 10 10 + import { useEntity, useReplicache } from "src/replicache"; 11 11 + import { v7 } from "uuid"; 12 12 + import { 13 13 + useLeafletPublicationData, 14 14 + usePollData, 15 15 + } from "components/PageSWRDataProvider"; 16 16 + import { voteOnPoll } from "actions/pollActions"; 17 17 + import { elementId } from "src/utils/elementId"; 18 18 + import { CheckTiny } from "components/Icons/CheckTiny"; 19 19 + import { CloseTiny } from "components/Icons/CloseTiny"; 20 20 + import { PublicationPollBlock } from "../PublicationPollBlock"; 21 21 + import { usePollBlockUIState } from "./pollBlockState"; 22 22 + 23 23 + export const PollBlock = (props: BlockProps) => { 24 24 + let { data: pub } = useLeafletPublicationData(); 25 25 + if (!pub) return <LeafletPollBlock {...props} />; 26 26 + return <PublicationPollBlock {...props} />; 27 27 + }; 28 28 + 29 29 + export const LeafletPollBlock = (props: BlockProps) => { 30 30 + let isSelected = useUIState((s) => 31 31 + s.selectedBlocks.find((b) => b.value === props.entityID), 32 32 + ); 33 33 + let { permissions } = useEntitySetContext(); 34 34 + 35 35 + let { data: pollData } = usePollData(); 36 36 + let hasVoted = 37 37 + pollData?.voter_token && 38 38 + pollData.polls.find( 39 39 + (v) => 40 40 + v.poll_votes_on_entity.voter_token === pollData.voter_token && 41 41 + v.poll_votes_on_entity.poll_entity === props.entityID, 42 42 + ); 43 43 + 44 44 + let pollState = usePollBlockUIState((s) => s[props.entityID]?.state); 45 45 + if (!pollState) { 46 46 + if (hasVoted) pollState = "results"; 47 47 + else pollState = "voting"; 48 48 + } 49 49 + 50 50 + const setPollState = useCallback( 51 51 + (state: "editing" | "voting" | "results") => { 52 52 + usePollBlockUIState.setState((s) => ({ [props.entityID]: { state } })); 53 53 + }, 54 54 + [], 55 55 + ); 56 56 + 57 57 + let votes = 58 58 + pollData?.polls.filter( 59 59 + (v) => v.poll_votes_on_entity.poll_entity === props.entityID, 60 60 + ) || []; 61 61 + let totalVotes = votes.length; 62 62 + 63 63 + return ( 64 64 + <div 65 65 + className={`poll flex flex-col gap-2 p-3 w-full 66 66 + ${isSelected ? "block-border-selected " : "block-border"}`} 67 67 + style={{ 68 68 + backgroundColor: 69 69 + "color-mix(in oklab, rgb(var(--accent-1)), rgb(var(--bg-page)) 85%)", 70 70 + }} 71 71 + > 72 72 + {pollState === "editing" ? ( 73 73 + <EditPoll 74 74 + totalVotes={totalVotes} 75 75 + votes={votes.map((v) => v.poll_votes_on_entity)} 76 76 + entityID={props.entityID} 77 77 + close={() => { 78 78 + if (hasVoted) setPollState("results"); 79 79 + else setPollState("voting"); 80 80 + }} 81 81 + /> 82 82 + ) : pollState === "results" ? ( 83 83 + <PollResults 84 84 + entityID={props.entityID} 85 85 + pollState={pollState} 86 86 + setPollState={setPollState} 87 87 + hasVoted={!!hasVoted} 88 88 + /> 89 89 + ) : ( 90 90 + <PollVote 91 91 + entityID={props.entityID} 92 92 + onSubmit={() => setPollState("results")} 93 93 + pollState={pollState} 94 94 + setPollState={setPollState} 95 95 + hasVoted={!!hasVoted} 96 96 + /> 97 97 + )} 98 98 + </div> 99 99 + ); 100 100 + }; 101 101 + 102 102 + const PollVote = (props: { 103 103 + entityID: string; 104 104 + onSubmit: () => void; 105 105 + pollState: "editing" | "voting" | "results"; 106 106 + setPollState: (pollState: "editing" | "voting" | "results") => void; 107 107 + hasVoted: boolean; 108 108 + }) => { 109 109 + let { data, mutate } = usePollData(); 110 110 + let { permissions } = useEntitySetContext(); 111 111 + 112 112 + let pollOptions = useEntity(props.entityID, "poll/options"); 113 113 + let currentVotes = data?.voter_token 114 114 + ? data.polls 115 115 + .filter( 116 116 + (p) => 117 117 + p.poll_votes_on_entity.poll_entity === props.entityID && 118 118 + p.poll_votes_on_entity.voter_token === data.voter_token, 119 119 + ) 120 120 + .map((v) => v.poll_votes_on_entity.option_entity) 121 121 + : []; 122 122 + let [selectedPollOptions, setSelectedPollOptions] = 123 123 + useState<string[]>(currentVotes); 124 124 + 125 125 + return ( 126 126 + <> 127 127 + {pollOptions.map((option, index) => ( 128 128 + <PollVoteButton 129 129 + key={option.data.value} 130 130 + selected={selectedPollOptions.includes(option.data.value)} 131 131 + toggleSelected={() => 132 132 + setSelectedPollOptions((s) => 133 133 + s.includes(option.data.value) 134 134 + ? s.filter((s) => s !== option.data.value) 135 135 + : [...s, option.data.value], 136 136 + ) 137 137 + } 138 138 + entityID={option.data.value} 139 139 + /> 140 140 + ))} 141 141 + <div className="flex justify-between items-center"> 142 142 + <div className="flex justify-end gap-2"> 143 143 + {permissions.write && ( 144 144 + <button 145 145 + className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 146 146 + onClick={() => { 147 147 + props.setPollState("editing"); 148 148 + }} 149 149 + > 150 150 + Edit Options 151 151 + </button> 152 152 + )} 153 153 + 154 154 + {permissions.write && <Separator classname="h-6" />} 155 155 + <PollStateToggle 156 156 + setPollState={props.setPollState} 157 157 + pollState={props.pollState} 158 158 + hasVoted={props.hasVoted} 159 159 + /> 160 160 + </div> 161 161 + <ButtonPrimary 162 162 + className="place-self-end" 163 163 + onClick={async () => { 164 164 + await voteOnPoll(props.entityID, selectedPollOptions); 165 165 + mutate((oldState) => { 166 166 + if (!oldState || !oldState.voter_token) return; 167 167 + return { 168 168 + ...oldState, 169 169 + polls: [ 170 170 + ...oldState.polls.filter( 171 171 + (p) => 172 172 + !( 173 173 + p.poll_votes_on_entity.voter_token === 174 174 + oldState.voter_token && 175 175 + p.poll_votes_on_entity.poll_entity == props.entityID 176 176 + ), 177 177 + ), 178 178 + ...selectedPollOptions.map((option_entity) => ({ 179 179 + poll_votes_on_entity: { 180 180 + option_entity, 181 181 + entities: { set: "" }, 182 182 + poll_entity: props.entityID, 183 183 + voter_token: oldState.voter_token!, 184 184 + }, 185 185 + })), 186 186 + ], 187 187 + }; 188 188 + }); 189 189 + props.onSubmit(); 190 190 + }} 191 191 + disabled={ 192 192 + selectedPollOptions.length === 0 || 193 193 + (selectedPollOptions.length === currentVotes.length && 194 194 + selectedPollOptions.every((s) => currentVotes.includes(s))) 195 195 + } 196 196 + > 197 197 + Vote! 198 198 + </ButtonPrimary> 199 199 + </div> 200 200 + </> 201 201 + ); 202 202 + }; 203 203 + const PollVoteButton = (props: { 204 204 + entityID: string; 205 205 + selected: boolean; 206 206 + toggleSelected: () => void; 207 207 + }) => { 208 208 + let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 209 209 + if (!optionName) return null; 210 210 + if (props.selected) 211 211 + return ( 212 212 + <div className="flex gap-2 items-center"> 213 213 + <ButtonPrimary 214 214 + className={`pollOption grow max-w-full flex`} 215 215 + onClick={() => { 216 216 + props.toggleSelected(); 217 217 + }} 218 218 + > 219 219 + {optionName} 220 220 + </ButtonPrimary> 221 221 + </div> 222 222 + ); 223 223 + return ( 224 224 + <div className="flex gap-2 items-center"> 225 225 + <ButtonSecondary 226 226 + className={`pollOption grow max-w-full flex`} 227 227 + onClick={() => { 228 228 + props.toggleSelected(); 229 229 + }} 230 230 + > 231 231 + {optionName} 232 232 + </ButtonSecondary> 233 233 + </div> 234 234 + ); 235 235 + }; 236 236 + 237 237 + const PollResults = (props: { 238 238 + entityID: string; 239 239 + pollState: "editing" | "voting" | "results"; 240 240 + setPollState: (pollState: "editing" | "voting" | "results") => void; 241 241 + hasVoted: boolean; 242 242 + }) => { 243 243 + let { data } = usePollData(); 244 244 + let { permissions } = useEntitySetContext(); 245 245 + let pollOptions = useEntity(props.entityID, "poll/options"); 246 246 + let pollData = data?.pollVotes.find((p) => p.poll_entity === props.entityID); 247 247 + let votesByOptions = pollData?.votesByOption || {}; 248 248 + let highestVotes = Math.max(...Object.values(votesByOptions)); 249 249 + let winningOptionEntities = Object.entries(votesByOptions).reduce<string[]>( 250 250 + (winningEntities, [entity, votes]) => { 251 251 + if (votes === highestVotes) winningEntities.push(entity); 252 252 + return winningEntities; 253 253 + }, 254 254 + [], 255 255 + ); 256 256 + return ( 257 257 + <> 258 258 + {pollOptions.map((p) => ( 259 259 + <PollResult 260 260 + key={p.id} 261 261 + winner={winningOptionEntities.includes(p.data.value)} 262 262 + entityID={p.data.value} 263 263 + totalVotes={pollData?.unique_votes || 0} 264 264 + votes={pollData?.votesByOption[p.data.value] || 0} 265 265 + /> 266 266 + ))} 267 267 + <div className="flex gap-2"> 268 268 + {permissions.write && ( 269 269 + <button 270 270 + className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 271 271 + onClick={() => { 272 272 + props.setPollState("editing"); 273 273 + }} 274 274 + > 275 275 + Edit Options 276 276 + </button> 277 277 + )} 278 278 + 279 279 + {permissions.write && <Separator classname="h-6" />} 280 280 + <PollStateToggle 281 281 + setPollState={props.setPollState} 282 282 + pollState={props.pollState} 283 283 + hasVoted={props.hasVoted} 284 284 + /> 285 285 + </div> 286 286 + </> 287 287 + ); 288 288 + }; 289 289 + 290 290 + const PollResult = (props: { 291 291 + entityID: string; 292 292 + votes: number; 293 293 + totalVotes: number; 294 294 + winner: boolean; 295 295 + }) => { 296 296 + let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 297 297 + return ( 298 298 + <div 299 299 + className={`pollResult relative grow py-0.5 px-2 border-accent-contrast rounded-md overflow-hidden ${props.winner ? "font-bold border-2" : "border"}`} 300 300 + > 301 301 + <div 302 302 + style={{ 303 303 + WebkitTextStroke: `${props.winner ? "6px" : "6px"} ${theme.colors["bg-page"]}`, 304 304 + paintOrder: "stroke fill", 305 305 + }} 306 306 + className={`pollResultContent text-accent-contrast relative flex gap-2 justify-between z-10`} 307 307 + > 308 308 + <div className="grow max-w-full truncate">{optionName}</div> 309 309 + <div>{props.votes}</div> 310 310 + </div> 311 311 + <div 312 312 + className={`pollResultBG absolute bg-bg-page w-full top-0 bottom-0 left-0 right-0 flex flex-row z-0`} 313 313 + > 314 314 + <div 315 315 + className={`bg-accent-contrast rounded-[2px] m-0.5`} 316 316 + style={{ 317 317 + maskImage: "var(--hatchSVG)", 318 318 + maskRepeat: "repeat repeat", 319 319 + 320 320 + ...(props.votes === 0 321 321 + ? { width: "4px" } 322 322 + : { flexBasis: `${(props.votes / props.totalVotes) * 100}%` }), 323 323 + }} 324 324 + /> 325 325 + <div /> 326 326 + </div> 327 327 + </div> 328 328 + ); 329 329 + }; 330 330 + 331 331 + const EditPoll = (props: { 332 332 + votes: { option_entity: string }[]; 333 333 + totalVotes: number; 334 334 + entityID: string; 335 335 + close: () => void; 336 336 + }) => { 337 337 + let pollOptions = useEntity(props.entityID, "poll/options"); 338 338 + let { rep } = useReplicache(); 339 339 + let permission_set = useEntitySetContext(); 340 340 + let [localPollOptionNames, setLocalPollOptionNames] = useState<{ 341 341 + [k: string]: string; 342 342 + }>({}); 343 343 + return ( 344 344 + <> 345 345 + {props.totalVotes > 0 && ( 346 346 + <div className="text-sm italic text-tertiary"> 347 347 + You can&apos;t edit options people already voted for! 348 348 + </div> 349 349 + )} 350 350 + 351 351 + {pollOptions.length === 0 && ( 352 352 + <div className="text-center italic text-tertiary text-sm"> 353 353 + no options yet... 354 354 + </div> 355 355 + )} 356 356 + {pollOptions.map((p) => ( 357 357 + <EditPollOption 358 358 + key={p.id} 359 359 + entityID={p.data.value} 360 360 + pollEntity={props.entityID} 361 361 + disabled={!!props.votes.find((v) => v.option_entity === p.data.value)} 362 362 + localNameState={localPollOptionNames[p.data.value]} 363 363 + setLocalNameState={setLocalPollOptionNames} 364 364 + /> 365 365 + ))} 366 366 + 367 367 + <button 368 368 + className="pollAddOption w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 369 369 + onClick={async () => { 370 370 + let pollOptionEntity = v7(); 371 371 + await rep?.mutate.addPollOption({ 372 372 + pollEntity: props.entityID, 373 373 + pollOptionEntity, 374 374 + pollOptionName: "", 375 375 + permission_set: permission_set.set, 376 376 + factID: v7(), 377 377 + }); 378 378 + 379 379 + focusElement( 380 380 + document.getElementById( 381 381 + elementId.block(props.entityID).pollInput(pollOptionEntity), 382 382 + ) as HTMLInputElement | null, 383 383 + ); 384 384 + }} 385 385 + > 386 386 + Add an Option 387 387 + </button> 388 388 + 389 389 + <hr className="border-border" /> 390 390 + <ButtonPrimary 391 391 + className="place-self-end" 392 392 + onClick={async () => { 393 393 + // remove any poll options that have no name 394 394 + // look through the localPollOptionNames object and remove any options that have no name 395 395 + let emptyOptions = Object.entries(localPollOptionNames).filter( 396 396 + ([optionEntity, optionName]) => optionName === "", 397 397 + ); 398 398 + await Promise.all( 399 399 + emptyOptions.map( 400 400 + async ([entity]) => 401 401 + await rep?.mutate.removePollOption({ 402 402 + optionEntity: entity, 403 403 + }), 404 404 + ), 405 405 + ); 406 406 + 407 407 + await rep?.mutate.assertFact( 408 408 + Object.entries(localPollOptionNames) 409 409 + .filter(([, name]) => !!name) 410 410 + .map(([entity, name]) => ({ 411 411 + entity, 412 412 + attribute: "poll-option/name", 413 413 + data: { type: "string", value: name }, 414 414 + })), 415 415 + ); 416 416 + props.close(); 417 417 + }} 418 418 + > 419 419 + Save <CheckTiny /> 420 420 + </ButtonPrimary> 421 421 + </> 422 422 + ); 423 423 + }; 424 424 + 425 425 + const EditPollOption = (props: { 426 426 + entityID: string; 427 427 + pollEntity: string; 428 428 + localNameState: string | undefined; 429 429 + setLocalNameState: ( 430 430 + s: (s: { [k: string]: string }) => { [k: string]: string }, 431 431 + ) => void; 432 432 + disabled: boolean; 433 433 + }) => { 434 434 + let { rep } = useReplicache(); 435 435 + let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 436 436 + useEffect(() => { 437 437 + props.setLocalNameState((s) => ({ 438 438 + ...s, 439 439 + [props.entityID]: optionName || "", 440 440 + })); 441 441 + }, [optionName, props.setLocalNameState, props.entityID]); 442 442 + 443 443 + return ( 444 444 + <div className="flex gap-2 items-center"> 445 445 + <Input 446 446 + id={elementId.block(props.pollEntity).pollInput(props.entityID)} 447 447 + type="text" 448 448 + className="pollOptionInput w-full input-with-border" 449 449 + placeholder="Option here..." 450 450 + disabled={props.disabled} 451 451 + value={ 452 452 + props.localNameState === undefined ? optionName : props.localNameState 453 453 + } 454 454 + onChange={(e) => { 455 455 + props.setLocalNameState((s) => ({ 456 456 + ...s, 457 457 + [props.entityID]: e.target.value, 458 458 + })); 459 459 + }} 460 460 + onKeyDown={(e) => { 461 461 + if (e.key === "Backspace" && !e.currentTarget.value) { 462 462 + e.preventDefault(); 463 463 + rep?.mutate.removePollOption({ optionEntity: props.entityID }); 464 464 + } 465 465 + }} 466 466 + /> 467 467 + 468 468 + <button 469 469 + tabIndex={-1} 470 470 + disabled={props.disabled} 471 471 + className="text-accent-contrast disabled:text-border" 472 472 + onMouseDown={async () => { 473 473 + await rep?.mutate.removePollOption({ optionEntity: props.entityID }); 474 474 + }} 475 475 + > 476 476 + <CloseTiny /> 477 477 + </button> 478 478 + </div> 479 479 + ); 480 480 + }; 481 481 + 482 482 + const PollStateToggle = (props: { 483 483 + setPollState: (pollState: "editing" | "voting" | "results") => void; 484 484 + hasVoted: boolean; 485 485 + pollState: "editing" | "voting" | "results"; 486 486 + }) => { 487 487 + return ( 488 488 + <button 489 489 + className="text-sm text-accent-contrast sm:hover:underline" 490 490 + onClick={() => { 491 491 + props.setPollState(props.pollState === "voting" ? "results" : "voting"); 492 492 + }} 493 493 + > 494 494 + {props.pollState === "voting" 495 495 + ? "See Results" 496 496 + : props.hasVoted 497 497 + ? "Change Vote" 498 498 + : "Back to Poll"} 499 499 + </button> 500 500 + ); 501 501 + };

+8

components/Blocks/PollBlock/pollBlockState.ts

··· 1 1 + import { create } from "zustand"; 2 2 + 3 3 + export let usePollBlockUIState = create( 4 4 + () => 5 5 + ({}) as { 6 6 + [entity: string]: { state: "editing" | "voting" | "results" } | undefined; 7 7 + }, 8 8 + );

-507

components/Blocks/PollBlock.tsx

··· 1 1 - import { useUIState } from "src/useUIState"; 2 2 - import { BlockProps } from "./Block"; 3 3 - import { ButtonPrimary, ButtonSecondary } from "components/Buttons"; 4 4 - import { useCallback, useEffect, useState } from "react"; 5 5 - import { focusElement, Input } from "components/Input"; 6 6 - import { Separator } from "components/Layout"; 7 7 - import { useEntitySetContext } from "components/EntitySetProvider"; 8 8 - import { theme } from "tailwind.config"; 9 9 - import { useEntity, useReplicache } from "src/replicache"; 10 10 - import { v7 } from "uuid"; 11 11 - import { 12 12 - useLeafletPublicationData, 13 13 - usePollData, 14 14 - } from "components/PageSWRDataProvider"; 15 15 - import { voteOnPoll } from "actions/pollActions"; 16 16 - import { create } from "zustand"; 17 17 - import { elementId } from "src/utils/elementId"; 18 18 - import { CheckTiny } from "components/Icons/CheckTiny"; 19 19 - import { CloseTiny } from "components/Icons/CloseTiny"; 20 20 - import { PublicationPollBlock } from "./PublicationPollBlock"; 21 21 - 22 22 - export let usePollBlockUIState = create( 23 23 - () => 24 24 - ({}) as { 25 25 - [entity: string]: { state: "editing" | "voting" | "results" } | undefined; 26 26 - }, 27 27 - ); 28 28 - 29 29 - export const PollBlock = (props: BlockProps) => { 30 30 - let { data: pub } = useLeafletPublicationData(); 31 31 - if (!pub) return <LeafletPollBlock {...props} />; 32 32 - return <PublicationPollBlock {...props} />; 33 33 - }; 34 34 - 35 35 - export const LeafletPollBlock = (props: BlockProps) => { 36 36 - let isSelected = useUIState((s) => 37 37 - s.selectedBlocks.find((b) => b.value === props.entityID), 38 38 - ); 39 39 - let { permissions } = useEntitySetContext(); 40 40 - 41 41 - let { data: pollData } = usePollData(); 42 42 - let hasVoted = 43 43 - pollData?.voter_token && 44 44 - pollData.polls.find( 45 45 - (v) => 46 46 - v.poll_votes_on_entity.voter_token === pollData.voter_token && 47 47 - v.poll_votes_on_entity.poll_entity === props.entityID, 48 48 - ); 49 49 - 50 50 - let pollState = usePollBlockUIState((s) => s[props.entityID]?.state); 51 51 - if (!pollState) { 52 52 - if (hasVoted) pollState = "results"; 53 53 - else pollState = "voting"; 54 54 - } 55 55 - 56 56 - const setPollState = useCallback( 57 57 - (state: "editing" | "voting" | "results") => { 58 58 - usePollBlockUIState.setState((s) => ({ [props.entityID]: { state } })); 59 59 - }, 60 60 - [], 61 61 - ); 62 62 - 63 63 - let votes = 64 64 - pollData?.polls.filter( 65 65 - (v) => v.poll_votes_on_entity.poll_entity === props.entityID, 66 66 - ) || []; 67 67 - let totalVotes = votes.length; 68 68 - 69 69 - return ( 70 70 - <div 71 71 - className={`poll flex flex-col gap-2 p-3 w-full 72 72 - ${isSelected ? "block-border-selected " : "block-border"}`} 73 73 - style={{ 74 74 - backgroundColor: 75 75 - "color-mix(in oklab, rgb(var(--accent-1)), rgb(var(--bg-page)) 85%)", 76 76 - }} 77 77 - > 78 78 - {pollState === "editing" ? ( 79 79 - <EditPoll 80 80 - totalVotes={totalVotes} 81 81 - votes={votes.map((v) => v.poll_votes_on_entity)} 82 82 - entityID={props.entityID} 83 83 - close={() => { 84 84 - if (hasVoted) setPollState("results"); 85 85 - else setPollState("voting"); 86 86 - }} 87 87 - /> 88 88 - ) : pollState === "results" ? ( 89 89 - <PollResults 90 90 - entityID={props.entityID} 91 91 - pollState={pollState} 92 92 - setPollState={setPollState} 93 93 - hasVoted={!!hasVoted} 94 94 - /> 95 95 - ) : ( 96 96 - <PollVote 97 97 - entityID={props.entityID} 98 98 - onSubmit={() => setPollState("results")} 99 99 - pollState={pollState} 100 100 - setPollState={setPollState} 101 101 - hasVoted={!!hasVoted} 102 102 - /> 103 103 - )} 104 104 - </div> 105 105 - ); 106 106 - }; 107 107 - 108 108 - const PollVote = (props: { 109 109 - entityID: string; 110 110 - onSubmit: () => void; 111 111 - pollState: "editing" | "voting" | "results"; 112 112 - setPollState: (pollState: "editing" | "voting" | "results") => void; 113 113 - hasVoted: boolean; 114 114 - }) => { 115 115 - let { data, mutate } = usePollData(); 116 116 - let { permissions } = useEntitySetContext(); 117 117 - 118 118 - let pollOptions = useEntity(props.entityID, "poll/options"); 119 119 - let currentVotes = data?.voter_token 120 120 - ? data.polls 121 121 - .filter( 122 122 - (p) => 123 123 - p.poll_votes_on_entity.poll_entity === props.entityID && 124 124 - p.poll_votes_on_entity.voter_token === data.voter_token, 125 125 - ) 126 126 - .map((v) => v.poll_votes_on_entity.option_entity) 127 127 - : []; 128 128 - let [selectedPollOptions, setSelectedPollOptions] = 129 129 - useState<string[]>(currentVotes); 130 130 - 131 131 - return ( 132 132 - <> 133 133 - {pollOptions.map((option, index) => ( 134 134 - <PollVoteButton 135 135 - key={option.data.value} 136 136 - selected={selectedPollOptions.includes(option.data.value)} 137 137 - toggleSelected={() => 138 138 - setSelectedPollOptions((s) => 139 139 - s.includes(option.data.value) 140 140 - ? s.filter((s) => s !== option.data.value) 141 141 - : [...s, option.data.value], 142 142 - ) 143 143 - } 144 144 - entityID={option.data.value} 145 145 - /> 146 146 - ))} 147 147 - <div className="flex justify-between items-center"> 148 148 - <div className="flex justify-end gap-2"> 149 149 - {permissions.write && ( 150 150 - <button 151 151 - className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 152 152 - onClick={() => { 153 153 - props.setPollState("editing"); 154 154 - }} 155 155 - > 156 156 - Edit Options 157 157 - </button> 158 158 - )} 159 159 - 160 160 - {permissions.write && <Separator classname="h-6" />} 161 161 - <PollStateToggle 162 162 - setPollState={props.setPollState} 163 163 - pollState={props.pollState} 164 164 - hasVoted={props.hasVoted} 165 165 - /> 166 166 - </div> 167 167 - <ButtonPrimary 168 168 - className="place-self-end" 169 169 - onClick={async () => { 170 170 - await voteOnPoll(props.entityID, selectedPollOptions); 171 171 - mutate((oldState) => { 172 172 - if (!oldState || !oldState.voter_token) return; 173 173 - return { 174 174 - ...oldState, 175 175 - polls: [ 176 176 - ...oldState.polls.filter( 177 177 - (p) => 178 178 - !( 179 179 - p.poll_votes_on_entity.voter_token === 180 180 - oldState.voter_token && 181 181 - p.poll_votes_on_entity.poll_entity == props.entityID 182 182 - ), 183 183 - ), 184 184 - ...selectedPollOptions.map((option_entity) => ({ 185 185 - poll_votes_on_entity: { 186 186 - option_entity, 187 187 - entities: { set: "" }, 188 188 - poll_entity: props.entityID, 189 189 - voter_token: oldState.voter_token!, 190 190 - }, 191 191 - })), 192 192 - ], 193 193 - }; 194 194 - }); 195 195 - props.onSubmit(); 196 196 - }} 197 197 - disabled={ 198 198 - selectedPollOptions.length === 0 || 199 199 - (selectedPollOptions.length === currentVotes.length && 200 200 - selectedPollOptions.every((s) => currentVotes.includes(s))) 201 201 - } 202 202 - > 203 203 - Vote! 204 204 - </ButtonPrimary> 205 205 - </div> 206 206 - </> 207 207 - ); 208 208 - }; 209 209 - const PollVoteButton = (props: { 210 210 - entityID: string; 211 211 - selected: boolean; 212 212 - toggleSelected: () => void; 213 213 - }) => { 214 214 - let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 215 215 - if (!optionName) return null; 216 216 - if (props.selected) 217 217 - return ( 218 218 - <div className="flex gap-2 items-center"> 219 219 - <ButtonPrimary 220 220 - className={`pollOption grow max-w-full flex`} 221 221 - onClick={() => { 222 222 - props.toggleSelected(); 223 223 - }} 224 224 - > 225 225 - {optionName} 226 226 - </ButtonPrimary> 227 227 - </div> 228 228 - ); 229 229 - return ( 230 230 - <div className="flex gap-2 items-center"> 231 231 - <ButtonSecondary 232 232 - className={`pollOption grow max-w-full flex`} 233 233 - onClick={() => { 234 234 - props.toggleSelected(); 235 235 - }} 236 236 - > 237 237 - {optionName} 238 238 - </ButtonSecondary> 239 239 - </div> 240 240 - ); 241 241 - }; 242 242 - 243 243 - const PollResults = (props: { 244 244 - entityID: string; 245 245 - pollState: "editing" | "voting" | "results"; 246 246 - setPollState: (pollState: "editing" | "voting" | "results") => void; 247 247 - hasVoted: boolean; 248 248 - }) => { 249 249 - let { data } = usePollData(); 250 250 - let { permissions } = useEntitySetContext(); 251 251 - let pollOptions = useEntity(props.entityID, "poll/options"); 252 252 - let pollData = data?.pollVotes.find((p) => p.poll_entity === props.entityID); 253 253 - let votesByOptions = pollData?.votesByOption || {}; 254 254 - let highestVotes = Math.max(...Object.values(votesByOptions)); 255 255 - let winningOptionEntities = Object.entries(votesByOptions).reduce<string[]>( 256 256 - (winningEntities, [entity, votes]) => { 257 257 - if (votes === highestVotes) winningEntities.push(entity); 258 258 - return winningEntities; 259 259 - }, 260 260 - [], 261 261 - ); 262 262 - return ( 263 263 - <> 264 264 - {pollOptions.map((p) => ( 265 265 - <PollResult 266 266 - key={p.id} 267 267 - winner={winningOptionEntities.includes(p.data.value)} 268 268 - entityID={p.data.value} 269 269 - totalVotes={pollData?.unique_votes || 0} 270 270 - votes={pollData?.votesByOption[p.data.value] || 0} 271 271 - /> 272 272 - ))} 273 273 - <div className="flex gap-2"> 274 274 - {permissions.write && ( 275 275 - <button 276 276 - className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 277 277 - onClick={() => { 278 278 - props.setPollState("editing"); 279 279 - }} 280 280 - > 281 281 - Edit Options 282 282 - </button> 283 283 - )} 284 284 - 285 285 - {permissions.write && <Separator classname="h-6" />} 286 286 - <PollStateToggle 287 287 - setPollState={props.setPollState} 288 288 - pollState={props.pollState} 289 289 - hasVoted={props.hasVoted} 290 290 - /> 291 291 - </div> 292 292 - </> 293 293 - ); 294 294 - }; 295 295 - 296 296 - const PollResult = (props: { 297 297 - entityID: string; 298 298 - votes: number; 299 299 - totalVotes: number; 300 300 - winner: boolean; 301 301 - }) => { 302 302 - let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 303 303 - return ( 304 304 - <div 305 305 - className={`pollResult relative grow py-0.5 px-2 border-accent-contrast rounded-md overflow-hidden ${props.winner ? "font-bold border-2" : "border"}`} 306 306 - > 307 307 - <div 308 308 - style={{ 309 309 - WebkitTextStroke: `${props.winner ? "6px" : "6px"} ${theme.colors["bg-page"]}`, 310 310 - paintOrder: "stroke fill", 311 311 - }} 312 312 - className={`pollResultContent text-accent-contrast relative flex gap-2 justify-between z-10`} 313 313 - > 314 314 - <div className="grow max-w-full truncate">{optionName}</div> 315 315 - <div>{props.votes}</div> 316 316 - </div> 317 317 - <div 318 318 - className={`pollResultBG absolute bg-bg-page w-full top-0 bottom-0 left-0 right-0 flex flex-row z-0`} 319 319 - > 320 320 - <div 321 321 - className={`bg-accent-contrast rounded-[2px] m-0.5`} 322 322 - style={{ 323 323 - maskImage: "var(--hatchSVG)", 324 324 - maskRepeat: "repeat repeat", 325 325 - 326 326 - ...(props.votes === 0 327 327 - ? { width: "4px" } 328 328 - : { flexBasis: `${(props.votes / props.totalVotes) * 100}%` }), 329 329 - }} 330 330 - /> 331 331 - <div /> 332 332 - </div> 333 333 - </div> 334 334 - ); 335 335 - }; 336 336 - 337 337 - const EditPoll = (props: { 338 338 - votes: { option_entity: string }[]; 339 339 - totalVotes: number; 340 340 - entityID: string; 341 341 - close: () => void; 342 342 - }) => { 343 343 - let pollOptions = useEntity(props.entityID, "poll/options"); 344 344 - let { rep } = useReplicache(); 345 345 - let permission_set = useEntitySetContext(); 346 346 - let [localPollOptionNames, setLocalPollOptionNames] = useState<{ 347 347 - [k: string]: string; 348 348 - }>({}); 349 349 - return ( 350 350 - <> 351 351 - {props.totalVotes > 0 && ( 352 352 - <div className="text-sm italic text-tertiary"> 353 353 - You can&apos;t edit options people already voted for! 354 354 - </div> 355 355 - )} 356 356 - 357 357 - {pollOptions.length === 0 && ( 358 358 - <div className="text-center italic text-tertiary text-sm"> 359 359 - no options yet... 360 360 - </div> 361 361 - )} 362 362 - {pollOptions.map((p) => ( 363 363 - <EditPollOption 364 364 - key={p.id} 365 365 - entityID={p.data.value} 366 366 - pollEntity={props.entityID} 367 367 - disabled={!!props.votes.find((v) => v.option_entity === p.data.value)} 368 368 - localNameState={localPollOptionNames[p.data.value]} 369 369 - setLocalNameState={setLocalPollOptionNames} 370 370 - /> 371 371 - ))} 372 372 - 373 373 - <button 374 374 - className="pollAddOption w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 375 375 - onClick={async () => { 376 376 - let pollOptionEntity = v7(); 377 377 - await rep?.mutate.addPollOption({ 378 378 - pollEntity: props.entityID, 379 379 - pollOptionEntity, 380 380 - pollOptionName: "", 381 381 - permission_set: permission_set.set, 382 382 - factID: v7(), 383 383 - }); 384 384 - 385 385 - focusElement( 386 386 - document.getElementById( 387 387 - elementId.block(props.entityID).pollInput(pollOptionEntity), 388 388 - ) as HTMLInputElement | null, 389 389 - ); 390 390 - }} 391 391 - > 392 392 - Add an Option 393 393 - </button> 394 394 - 395 395 - <hr className="border-border" /> 396 396 - <ButtonPrimary 397 397 - className="place-self-end" 398 398 - onClick={async () => { 399 399 - // remove any poll options that have no name 400 400 - // look through the localPollOptionNames object and remove any options that have no name 401 401 - let emptyOptions = Object.entries(localPollOptionNames).filter( 402 402 - ([optionEntity, optionName]) => optionName === "", 403 403 - ); 404 404 - await Promise.all( 405 405 - emptyOptions.map( 406 406 - async ([entity]) => 407 407 - await rep?.mutate.removePollOption({ 408 408 - optionEntity: entity, 409 409 - }), 410 410 - ), 411 411 - ); 412 412 - 413 413 - await rep?.mutate.assertFact( 414 414 - Object.entries(localPollOptionNames) 415 415 - .filter(([, name]) => !!name) 416 416 - .map(([entity, name]) => ({ 417 417 - entity, 418 418 - attribute: "poll-option/name", 419 419 - data: { type: "string", value: name }, 420 420 - })), 421 421 - ); 422 422 - props.close(); 423 423 - }} 424 424 - > 425 425 - Save <CheckTiny /> 426 426 - </ButtonPrimary> 427 427 - </> 428 428 - ); 429 429 - }; 430 430 - 431 431 - const EditPollOption = (props: { 432 432 - entityID: string; 433 433 - pollEntity: string; 434 434 - localNameState: string | undefined; 435 435 - setLocalNameState: ( 436 436 - s: (s: { [k: string]: string }) => { [k: string]: string }, 437 437 - ) => void; 438 438 - disabled: boolean; 439 439 - }) => { 440 440 - let { rep } = useReplicache(); 441 441 - let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 442 442 - useEffect(() => { 443 443 - props.setLocalNameState((s) => ({ 444 444 - ...s, 445 445 - [props.entityID]: optionName || "", 446 446 - })); 447 447 - }, [optionName, props.setLocalNameState, props.entityID]); 448 448 - 449 449 - return ( 450 450 - <div className="flex gap-2 items-center"> 451 451 - <Input 452 452 - id={elementId.block(props.pollEntity).pollInput(props.entityID)} 453 453 - type="text" 454 454 - className="pollOptionInput w-full input-with-border" 455 455 - placeholder="Option here..." 456 456 - disabled={props.disabled} 457 457 - value={ 458 458 - props.localNameState === undefined ? optionName : props.localNameState 459 459 - } 460 460 - onChange={(e) => { 461 461 - props.setLocalNameState((s) => ({ 462 462 - ...s, 463 463 - [props.entityID]: e.target.value, 464 464 - })); 465 465 - }} 466 466 - onKeyDown={(e) => { 467 467 - if (e.key === "Backspace" && !e.currentTarget.value) { 468 468 - e.preventDefault(); 469 469 - rep?.mutate.removePollOption({ optionEntity: props.entityID }); 470 470 - } 471 471 - }} 472 472 - /> 473 473 - 474 474 - <button 475 475 - tabIndex={-1} 476 476 - disabled={props.disabled} 477 477 - className="text-accent-contrast disabled:text-border" 478 478 - onMouseDown={async () => { 479 479 - await rep?.mutate.removePollOption({ optionEntity: props.entityID }); 480 480 - }} 481 481 - > 482 482 - <CloseTiny /> 483 483 - </button> 484 484 - </div> 485 485 - ); 486 486 - }; 487 487 - 488 488 - const PollStateToggle = (props: { 489 489 - setPollState: (pollState: "editing" | "voting" | "results") => void; 490 490 - hasVoted: boolean; 491 491 - pollState: "editing" | "voting" | "results"; 492 492 - }) => { 493 493 - return ( 494 494 - <button 495 495 - className="text-sm text-accent-contrast sm:hover:underline" 496 496 - onClick={() => { 497 497 - props.setPollState(props.pollState === "voting" ? "results" : "voting"); 498 498 - }} 499 499 - > 500 500 - {props.pollState === "voting" 501 501 - ? "See Results" 502 502 - : props.hasVoted 503 503 - ? "Change Vote" 504 504 - : "Back to Poll"} 505 505 - </button> 506 506 - ); 507 507 - };

+2 -1

components/Blocks/PublicationPollBlock.tsx

··· 1 1 import { useUIState } from "src/useUIState"; 2 2 import { BlockProps } from "./Block"; 3 3 import { useMemo } from "react"; 4 4 - import { focusElement, AsyncValueInput } from "components/Input"; 4 4 + import { AsyncValueInput } from "components/Input"; 5 5 + import { focusElement } from "src/utils/focusElement"; 5 6 import { useEntitySetContext } from "components/EntitySetProvider"; 6 7 import { useEntity, useReplicache } from "src/replicache"; 7 8 import { v7 } from "uuid";

+2 -2

components/Blocks/RSVPBlock/SendUpdate.tsx

··· 9 9 import { sendUpdateToRSVPS } from "actions/sendUpdateToRSVPS"; 10 10 import { useReplicache } from "src/replicache"; 11 11 import { Checkbox } from "components/Checkbox"; 12 12 - import { usePublishLink } from "components/ShareOptions"; 12 12 + import { useReadOnlyShareLink } from "app/[leaflet_id]/actions/ShareOptions"; 13 13 14 14 export function SendUpdateButton(props: { entityID: string }) { 15 15 - let publishLink = usePublishLink(); 15 15 + let publishLink = useReadOnlyShareLink(); 16 16 let { permissions } = useEntitySetContext(); 17 17 let { permission_token } = useReplicache(); 18 18 let [input, setInput] = useState("");

+35 -31

components/Blocks/TextBlock/RenderYJSFragment.tsx

··· 3 3 import { CSSProperties, Fragment } from "react"; 4 4 import { theme } from "tailwind.config"; 5 5 import * as base64 from "base64-js"; 6 6 + import { didToBlueskyUrl } from "src/utils/mentionUtils"; 7 7 + import { AtMentionLink } from "components/AtMentionLink"; 8 8 + import { Delta } from "src/utils/yjsFragmentToString"; 6 9 7 10 type BlockElements = "h1" | "h2" | "h3" | null | "blockquote" | "p"; 8 11 export function RenderYJSFragment({ ··· 60 63 ); 61 64 } 62 65 66 66 + if (node.constructor === XmlElement && node.nodeName === "hard_break") { 67 67 + return <br key={index} />; 68 68 + } 69 69 + 70 70 + // Handle didMention inline nodes 71 71 + if (node.constructor === XmlElement && node.nodeName === "didMention") { 72 72 + const did = node.getAttribute("did") || ""; 73 73 + const text = node.getAttribute("text") || ""; 74 74 + return ( 75 75 + <a 76 76 + href={didToBlueskyUrl(did)} 77 77 + target="_blank" 78 78 + rel="noopener noreferrer" 79 79 + key={index} 80 80 + className="text-accent-contrast hover:underline cursor-pointer" 81 81 + > 82 82 + {text} 83 83 + </a> 84 84 + ); 85 85 + } 86 86 + 87 87 + // Handle atMention inline nodes 88 88 + if (node.constructor === XmlElement && node.nodeName === "atMention") { 89 89 + const atURI = node.getAttribute("atURI") || ""; 90 90 + const text = node.getAttribute("text") || ""; 91 91 + return ( 92 92 + <AtMentionLink key={index} atURI={atURI}> 93 93 + {text} 94 94 + </AtMentionLink> 95 95 + ); 96 96 + } 97 97 + 63 98 return null; 64 99 }) 65 100 )} ··· 97 132 } 98 133 }; 99 134 100 100 - export type Delta = { 101 101 - insert: string; 102 102 - attributes?: { 103 103 - strong?: {}; 104 104 - code?: {}; 105 105 - em?: {}; 106 106 - underline?: {}; 107 107 - strikethrough?: {}; 108 108 - highlight?: { color: string }; 109 109 - link?: { href: string }; 110 110 - }; 111 111 - }; 112 112 - 113 135 function attributesToStyle(d: Delta) { 114 136 let props = { 115 137 style: {}, ··· 140 162 return props; 141 163 } 142 164 143 143 - export function YJSFragmentToString( 144 144 - node: XmlElement | XmlText | XmlHook, 145 145 - ): string { 146 146 - if (node.constructor === XmlElement) { 147 147 - return node 148 148 - .toArray() 149 149 - .map((f) => YJSFragmentToString(f)) 150 150 - .join(""); 151 151 - } 152 152 - if (node.constructor === XmlText) { 153 153 - return (node.toDelta() as Delta[]) 154 154 - .map((d) => { 155 155 - return d.insert; 156 156 - }) 157 157 - .join(""); 158 158 - } 159 159 - return ""; 160 160 - }

+109 -14

components/Blocks/TextBlock/index.tsx

··· 1 1 - import { useRef, useEffect, useState } from "react"; 1 1 + import { useRef, useEffect, useState, useCallback } from "react"; 2 2 import { elementId } from "src/utils/elementId"; 3 3 import { useReplicache, useEntity } from "src/replicache"; 4 4 import { isVisible } from "src/utils/isVisible"; 5 5 import { EditorState, TextSelection } from "prosemirror-state"; 6 6 + import { EditorView } from "prosemirror-view"; 6 7 import { RenderYJSFragment } from "./RenderYJSFragment"; 7 8 import { useHasPageLoaded } from "components/InitialPageLoadProvider"; 8 9 import { BlockProps } from "../Block"; ··· 23 24 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 24 25 import { DotLoader } from "components/utils/DotLoader"; 25 26 import { useMountProsemirror } from "./mountProsemirror"; 27 27 + import { schema } from "./schema"; 28 28 + 29 29 + import { Mention, MentionAutocomplete } from "components/Mention"; 30 30 + import { addMentionToEditor } from "app/[leaflet_id]/publish/BskyPostEditorProsemirror"; 26 31 27 32 const HeadingStyle = { 28 33 1: "text-xl font-bold", ··· 183 188 let editorState = useEditorStates( 184 189 (s) => s.editorStates[props.entityID], 185 190 )?.editor; 191 191 + const { 192 192 + viewRef, 193 193 + mentionOpen, 194 194 + mentionCoords, 195 195 + openMentionAutocomplete, 196 196 + handleMentionSelect, 197 197 + handleMentionOpenChange, 198 198 + } = useMentionState(props.entityID); 186 199 187 200 let { mountRef, actionTimeout } = useMountProsemirror({ 188 201 props, 202 202 + openMentionAutocomplete, 189 203 }); 190 204 191 205 return ( ··· 199 213 ? "blockquote pt-3" 200 214 : "blockquote" 201 215 : "" 202 202 - } 203 203 - 204 204 - `} 216 216 + }`} 205 217 > 206 218 <pre 207 219 data-entityid={props.entityID} ··· 224 236 } 225 237 }} 226 238 onFocus={() => { 239 239 + handleMentionOpenChange(false); 227 240 setTimeout(() => { 228 241 useUIState.getState().setSelectedBlock(props); 229 242 useUIState.setState(() => ({ ··· 249 262 ${props.className}`} 250 263 ref={mountRef} 251 264 /> 265 265 + {focused && ( 266 266 + <MentionAutocomplete 267 267 + open={mentionOpen} 268 268 + onOpenChange={handleMentionOpenChange} 269 269 + view={viewRef} 270 270 + onSelect={handleMentionSelect} 271 271 + coords={mentionCoords} 272 272 + /> 273 273 + )} 252 274 {editorState?.doc.textContent.length === 0 && 253 275 props.previousBlock === null && 254 276 props.nextBlock === null ? ( ··· 439 461 ); 440 462 }; 441 463 442 442 - const useMentionState = () => { 443 443 - const [editorState, setEditorState] = useState<EditorState | null>(null); 444 444 - const [mentionState, setMentionState] = useState<{ 445 445 - active: boolean; 446 446 - range: { from: number; to: number } | null; 447 447 - selectedMention: { handle: string; did: string } | null; 448 448 - }>({ active: false, range: null, selectedMention: null }); 449 449 - const mentionStateRef = useRef(mentionState); 450 450 - mentionStateRef.current = mentionState; 451 451 - return { mentionStateRef }; 464 464 + const useMentionState = (entityID: string) => { 465 465 + let view = useEditorStates((s) => s.editorStates[entityID])?.view; 466 466 + let viewRef = useRef(view || null); 467 467 + viewRef.current = view || null; 468 468 + 469 469 + const [mentionOpen, setMentionOpen] = useState(false); 470 470 + const [mentionCoords, setMentionCoords] = useState<{ 471 471 + top: number; 472 472 + left: number; 473 473 + } | null>(null); 474 474 + const [mentionInsertPos, setMentionInsertPos] = useState<number | null>(null); 475 475 + 476 476 + // Close autocomplete when this block is no longer focused 477 477 + const isFocused = useUIState((s) => s.focusedEntity?.entityID === entityID); 478 478 + useEffect(() => { 479 479 + if (!isFocused) { 480 480 + setMentionOpen(false); 481 481 + setMentionCoords(null); 482 482 + setMentionInsertPos(null); 483 483 + } 484 484 + }, [isFocused]); 485 485 + 486 486 + const openMentionAutocomplete = useCallback(() => { 487 487 + const view = useEditorStates.getState().editorStates[entityID]?.view; 488 488 + if (!view) return; 489 489 + 490 490 + // Get the position right after the @ we just inserted 491 491 + const pos = view.state.selection.from; 492 492 + setMentionInsertPos(pos); 493 493 + 494 494 + // Get coordinates for the popup relative to the positioned parent 495 495 + const coords = view.coordsAtPos(pos - 1); // Position of the @ 496 496 + 497 497 + // Find the relative positioned parent container 498 498 + const editorEl = view.dom; 499 499 + const container = editorEl.closest('.relative') as HTMLElement | null; 500 500 + 501 501 + if (container) { 502 502 + const containerRect = container.getBoundingClientRect(); 503 503 + setMentionCoords({ 504 504 + top: coords.bottom - containerRect.top, 505 505 + left: coords.left - containerRect.left, 506 506 + }); 507 507 + } else { 508 508 + setMentionCoords({ 509 509 + top: coords.bottom, 510 510 + left: coords.left, 511 511 + }); 512 512 + } 513 513 + setMentionOpen(true); 514 514 + }, [entityID]); 515 515 + 516 516 + const handleMentionSelect = useCallback( 517 517 + (mention: Mention) => { 518 518 + const view = useEditorStates.getState().editorStates[entityID]?.view; 519 519 + if (!view || mentionInsertPos === null) return; 520 520 + 521 521 + // The @ is at mentionInsertPos - 1, we need to replace it with the mention 522 522 + const from = mentionInsertPos - 1; 523 523 + const to = mentionInsertPos; 524 524 + 525 525 + addMentionToEditor(mention, { from, to }, view); 526 526 + view.focus(); 527 527 + }, 528 528 + [entityID, mentionInsertPos], 529 529 + ); 530 530 + 531 531 + const handleMentionOpenChange = useCallback((open: boolean) => { 532 532 + setMentionOpen(open); 533 533 + if (!open) { 534 534 + setMentionCoords(null); 535 535 + setMentionInsertPos(null); 536 536 + } 537 537 + }, []); 538 538 + 539 539 + return { 540 540 + viewRef, 541 541 + mentionOpen, 542 542 + mentionCoords, 543 543 + openMentionAutocomplete, 544 544 + handleMentionSelect, 545 545 + handleMentionOpenChange, 546 546 + }; 452 547 };

+32 -3

components/Blocks/TextBlock/inputRules.ts

··· 11 11 import { schema } from "./schema"; 12 12 import { useUIState } from "src/useUIState"; 13 13 import { flushSync } from "react-dom"; 14 14 + import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage"; 14 15 export const inputrules = ( 15 16 propsRef: MutableRefObject<BlockProps & { entity_set: { set: string } }>, 16 17 repRef: MutableRefObject<Replicache<ReplicacheMutators> | null>, 18 18 + openMentionAutocomplete?: () => void, 17 19 ) => 18 20 inputRules({ 19 21 //Strikethrough ··· 108 110 109 111 // Code Block 110 112 new InputRule(/^```\s$/, (state, match) => { 111 111 - flushSync(() => 113 113 + flushSync(() => { 112 114 repRef.current?.mutate.assertFact({ 113 115 entity: propsRef.current.entityID, 114 116 attribute: "block/type", 115 117 data: { type: "block-type-union", value: "code" }, 116 116 - }), 117 117 - ); 118 118 + }); 119 119 + let lastLang = localStorage.getItem(LAST_USED_CODE_LANGUAGE_KEY); 120 120 + if (lastLang) { 121 121 + repRef.current?.mutate.assertFact({ 122 122 + entity: propsRef.current.entityID, 123 123 + attribute: "block/code-language", 124 124 + data: { type: "string", value: lastLang }, 125 125 + }); 126 126 + } 127 127 + }); 118 128 setTimeout(() => { 119 129 focusBlock({ ...propsRef.current, type: "code" }, { type: "start" }); 120 130 }, 20); ··· 180 190 data: { type: "number", value: headingLevel }, 181 191 }); 182 192 return tr; 193 193 + }), 194 194 + 195 195 + // Mention - @ at start of line, after space, or after hard break 196 196 + new InputRule(/(?:^|\s)@$/, (state, match, start, end) => { 197 197 + if (!openMentionAutocomplete) return null; 198 198 + // Schedule opening the autocomplete after the transaction is applied 199 199 + setTimeout(() => openMentionAutocomplete(), 0); 200 200 + return null; // Let the @ be inserted normally 201 201 + }), 202 202 + // Mention - @ immediately after a hard break (hard breaks are nodes, not text) 203 203 + new InputRule(/@$/, (state, match, start, end) => { 204 204 + if (!openMentionAutocomplete) return null; 205 205 + // Check if the character before @ is a hard break node 206 206 + const $pos = state.doc.resolve(start); 207 207 + const nodeBefore = $pos.nodeBefore; 208 208 + if (nodeBefore && nodeBefore.type.name === "hard_break") { 209 209 + setTimeout(() => openMentionAutocomplete(), 0); 210 210 + } 211 211 + return null; // Let the @ be inserted normally 183 212 }), 184 213 ], 185 214 });

+10 -13

components/Blocks/TextBlock/keymap.ts

··· 17 17 import { schema } from "./schema"; 18 18 import { useUIState } from "src/useUIState"; 19 19 import { setEditorState, useEditorStates } from "src/state/useEditorState"; 20 20 - import { focusPage } from "components/Pages"; 20 20 + import { focusPage } from "src/utils/focusPage"; 21 21 import { v7 } from "uuid"; 22 22 import { scanIndex } from "src/replicache/utils"; 23 23 import { indent, outdent } from "src/utils/list-operations"; 24 24 import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 25 25 import { isTextBlock } from "src/utils/isTextBlock"; 26 26 import { UndoManager } from "src/undoManager"; 27 27 - 28 27 type PropsRef = RefObject< 29 28 BlockProps & { 30 29 entity_set: { set: string }; ··· 35 34 propsRef: PropsRef, 36 35 repRef: RefObject<Replicache<ReplicacheMutators> | null>, 37 36 um: UndoManager, 38 38 - multiLine?: boolean, 37 37 + openMentionAutocomplete: () => void, 39 38 ) => 40 39 ({ 41 40 "Meta-b": toggleMark(schema.marks.strong), ··· 138 137 ), 139 138 "Shift-Backspace": backspace(propsRef, repRef), 140 139 Enter: (state, dispatch, view) => { 141 141 - if (multiLine && state.doc.content.size - state.selection.anchor > 1) 142 142 - return false; 143 143 - return um.withUndoGroup(() => 144 144 - enter(propsRef, repRef)(state, dispatch, view), 145 145 - ); 140 140 + return um.withUndoGroup(() => { 141 141 + return enter(propsRef, repRef)(state, dispatch, view); 142 142 + }); 146 143 }, 147 144 "Shift-Enter": (state, dispatch, view) => { 148 148 - if (multiLine) { 149 149 - return baseKeymap.Enter(state, dispatch, view); 145 145 + // Insert a hard break 146 146 + let hardBreak = schema.nodes.hard_break.create(); 147 147 + if (dispatch) { 148 148 + dispatch(state.tr.replaceSelectionWith(hardBreak).scrollIntoView()); 150 149 } 151 151 - return um.withUndoGroup(() => 152 152 - enter(propsRef, repRef)(state, dispatch, view), 153 153 - ); 150 150 + return true; 154 151 }, 155 152 "Ctrl-Enter": CtrlEnter(propsRef, repRef), 156 153 "Meta-Enter": CtrlEnter(propsRef, repRef),

+48 -12

components/Blocks/TextBlock/mountProsemirror.ts

··· 23 23 import { useHandlePaste } from "./useHandlePaste"; 24 24 import { BlockProps } from "../Block"; 25 25 import { useEntitySetContext } from "components/EntitySetProvider"; 26 26 + import { didToBlueskyUrl, atUriToUrl } from "src/utils/mentionUtils"; 26 27 27 27 - export function useMountProsemirror({ props }: { props: BlockProps }) { 28 28 + export function useMountProsemirror({ 29 29 + props, 30 30 + openMentionAutocomplete, 31 31 + }: { 32 32 + props: BlockProps; 33 33 + openMentionAutocomplete: () => void; 34 34 + }) { 28 35 let { entityID, parent } = props; 29 36 let rep = useReplicache(); 30 37 let mountRef = useRef<HTMLPreElement | null>(null); ··· 44 51 useLayoutEffect(() => { 45 52 if (!mountRef.current) return; 46 53 47 47 - const km = TextBlockKeymap(propsRef, repRef, rep.undoManager); 54 54 + const km = TextBlockKeymap( 55 55 + propsRef, 56 56 + repRef, 57 57 + rep.undoManager, 58 58 + openMentionAutocomplete, 59 59 + ); 48 60 const editor = EditorState.create({ 49 61 schema: schema, 50 62 plugins: [ 51 63 ySyncPlugin(value), 52 64 keymap(km), 53 53 - inputrules(propsRef, repRef), 65 65 + inputrules(propsRef, repRef, openMentionAutocomplete), 54 66 keymap(baseKeymap), 55 67 highlightSelectionPlugin, 56 68 autolink({ ··· 69 81 handleClickOn: (_view, _pos, node, _nodePos, _event, direct) => { 70 82 if (!direct) return; 71 83 if (node.nodeSize - 2 <= _pos) return; 72 72 - let mark = 73 73 - node 74 74 - .nodeAt(_pos - 1) 75 75 - ?.marks.find((f) => f.type === schema.marks.link) || 76 76 - node 77 77 - .nodeAt(Math.max(_pos - 2, 0)) 78 78 - ?.marks.find((f) => f.type === schema.marks.link); 79 79 - if (mark) { 80 80 - window.open(mark.attrs.href, "_blank"); 84 84 + 85 85 + // Check for marks at the clicked position 86 86 + const nodeAt1 = node.nodeAt(_pos - 1); 87 87 + const nodeAt2 = node.nodeAt(Math.max(_pos - 2, 0)); 88 88 + 89 89 + // Check for link marks 90 90 + let linkMark = nodeAt1?.marks.find((f) => f.type === schema.marks.link) || 91 91 + nodeAt2?.marks.find((f) => f.type === schema.marks.link); 92 92 + if (linkMark) { 93 93 + window.open(linkMark.attrs.href, "_blank"); 94 94 + return; 95 95 + } 96 96 + 97 97 + // Check for didMention inline nodes 98 98 + if (nodeAt1?.type === schema.nodes.didMention) { 99 99 + window.open(didToBlueskyUrl(nodeAt1.attrs.did), "_blank", "noopener,noreferrer"); 100 100 + return; 101 101 + } 102 102 + if (nodeAt2?.type === schema.nodes.didMention) { 103 103 + window.open(didToBlueskyUrl(nodeAt2.attrs.did), "_blank", "noopener,noreferrer"); 104 104 + return; 105 105 + } 106 106 + 107 107 + // Check for atMention inline nodes 108 108 + if (nodeAt1?.type === schema.nodes.atMention) { 109 109 + const url = atUriToUrl(nodeAt1.attrs.atURI); 110 110 + window.open(url, "_blank", "noopener,noreferrer"); 111 111 + return; 112 112 + } 113 113 + if (nodeAt2?.type === schema.nodes.atMention) { 114 114 + const url = atUriToUrl(nodeAt2.attrs.atURI); 115 115 + window.open(url, "_blank", "noopener,noreferrer"); 116 116 + return; 81 117 } 82 118 }, 83 119 dispatchTransaction,

+107 -1

components/Blocks/TextBlock/schema.ts

··· 1 1 - import { Schema, Node, MarkSpec } from "prosemirror-model"; 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { Schema, Node, MarkSpec, NodeSpec } from "prosemirror-model"; 2 3 import { marks } from "prosemirror-schema-basic"; 3 4 import { theme } from "tailwind.config"; 4 5 ··· 115 116 text: { 116 117 group: "inline", 117 118 }, 119 119 + hard_break: { 120 120 + group: "inline", 121 121 + inline: true, 122 122 + selectable: false, 123 123 + parseDOM: [{ tag: "br" }], 124 124 + toDOM: () => ["br"] as const, 125 125 + }, 126 126 + atMention: { 127 127 + attrs: { 128 128 + atURI: {}, 129 129 + text: { default: "" }, 130 130 + }, 131 131 + group: "inline", 132 132 + inline: true, 133 133 + atom: true, 134 134 + selectable: true, 135 135 + draggable: true, 136 136 + parseDOM: [ 137 137 + { 138 138 + tag: "span.atMention", 139 139 + getAttrs(dom: HTMLElement) { 140 140 + return { 141 141 + atURI: dom.getAttribute("data-at-uri"), 142 142 + text: dom.textContent || "", 143 143 + }; 144 144 + }, 145 145 + }, 146 146 + ], 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 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"; 154 154 + if (aturi.collection === "pub.leaflet.document") className += " italic"; 155 155 + 156 156 + // For publications and documents, show icon 157 157 + if ( 158 158 + aturi.collection === "pub.leaflet.publication" || 159 159 + aturi.collection === "pub.leaflet.document" 160 160 + ) { 161 161 + return [ 162 162 + "span", 163 163 + { 164 164 + class: className, 165 165 + "data-at-uri": node.attrs.atURI, 166 166 + }, 167 167 + [ 168 168 + "img", 169 169 + { 170 170 + src: `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`, 171 171 + class: "inline-block w-5 h-5 rounded-full mr-1 align-text-top", 172 172 + alt: "", 173 173 + width: "16", 174 174 + height: "16", 175 175 + loading: "lazy", 176 176 + }, 177 177 + ], 178 178 + node.attrs.text, 179 179 + ]; 180 180 + } 181 181 + 182 182 + return [ 183 183 + "span", 184 184 + { 185 185 + class: className, 186 186 + "data-at-uri": node.attrs.atURI, 187 187 + }, 188 188 + node.attrs.text, 189 189 + ]; 190 190 + }, 191 191 + } as NodeSpec, 192 192 + didMention: { 193 193 + attrs: { 194 194 + did: {}, 195 195 + text: { default: "" }, 196 196 + }, 197 197 + group: "inline", 198 198 + inline: true, 199 199 + atom: true, 200 200 + selectable: true, 201 201 + draggable: true, 202 202 + parseDOM: [ 203 203 + { 204 204 + tag: "span.didMention", 205 205 + getAttrs(dom: HTMLElement) { 206 206 + return { 207 207 + did: dom.getAttribute("data-did"), 208 208 + text: dom.textContent || "", 209 209 + }; 210 210 + }, 211 211 + }, 212 212 + ], 213 213 + toDOM(node) { 214 214 + return [ 215 215 + "span", 216 216 + { 217 217 + class: "didMention text-accent-contrast", 218 218 + "data-did": node.attrs.did, 219 219 + }, 220 220 + node.attrs.text, 221 221 + ]; 222 222 + }, 223 223 + } as NodeSpec, 118 224 }, 119 225 }; 120 226 export const schema = new Schema(baseSchema);

+1 -1

components/Blocks/useBlockKeyboardHandlers.ts

··· 12 12 import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; 13 13 import { useEntitySetContext } from "components/EntitySetProvider"; 14 14 import { Replicache } from "replicache"; 15 15 - import { deleteBlock } from "./DeleteBlock"; 15 15 + import { deleteBlock } from "src/utils/deleteBlock"; 16 16 import { entities } from "drizzle/schema"; 17 17 import { scanIndex } from "src/replicache/utils"; 18 18

+1 -1

components/Blocks/useBlockMouseHandlers.ts

··· 1 1 - import { useSelectingMouse } from "components/SelectionManager"; 1 1 + import { useSelectingMouse } from "components/SelectionManager/selectionState"; 2 2 import { MouseEvent, useCallback, useRef } from "react"; 3 3 import { useUIState } from "src/useUIState"; 4 4 import { Block } from "./Block";

+35 -21

components/Buttons.tsx

··· 10 10 import { PopoverArrow } from "./Icons/PopoverArrow"; 11 11 12 12 type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">; 13 13 + 13 14 export const ButtonPrimary = forwardRef< 14 15 HTMLButtonElement, 15 16 ButtonProps & { ··· 35 36 m-0 h-max 36 37 ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"} 37 38 ${compact ? "py-0 px-1" : "px-2 py-0.5 "} 38 38 - bg-accent-1 outline-transparent border border-accent-1 39 39 - rounded-md text-base font-bold text-accent-2 39 39 + bg-accent-1 disabled:bg-border-light 40 40 + border border-accent-1 rounded-md disabled:border-border-light 41 41 + outline outline-transparent outline-offset-1 focus:outline-accent-1 hover:outline-accent-1 42 42 + text-base font-bold text-accent-2 disabled:text-border disabled:hover:text-border 40 43 flex gap-2 items-center justify-center shrink-0 41 41 - transparent-outline focus:outline-accent-1 hover:outline-accent-1 outline-offset-1 42 42 - disabled:bg-border-light disabled:border-border-light disabled:text-border disabled:hover:text-border 43 44 ${className} 44 45 `} 45 46 > ··· 70 71 <button 71 72 {...buttonProps} 72 73 ref={ref} 73 73 - className={`m-0 h-max 74 74 + className={` 75 75 + m-0 h-max 74 76 ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"} 75 75 - ${props.compact ? "py-0 px-1" : "px-2 py-0.5 "} 76 76 - bg-bg-page outline-transparent 77 77 - rounded-md text-base font-bold text-accent-contrast 78 78 - flex gap-2 items-center justify-center shrink-0 79 79 - transparent-outline focus:outline-accent-contrast hover:outline-accent-contrast outline-offset-1 80 80 - border border-accent-contrast 81 81 - disabled:bg-border-light disabled:text-border disabled:hover:text-border 82 82 - ${props.className} 83 83 - `} 77 77 + ${compact ? "py-0 px-1" : "px-2 py-0.5 "} 78 78 + bg-bg-page disabled:bg-border-light 79 79 + border border-accent-contrast rounded-md 80 80 + outline outline-transparent focus:outline-accent-contrast hover:outline-accent-contrast outline-offset-1 81 81 + text-base font-bold text-accent-contrast disabled:text-border disabled:hover:text-border 82 82 + flex gap-2 items-center justify-center shrink-0 83 83 + ${props.className} 84 84 + `} 84 85 > 85 86 {props.children} 86 87 </button> ··· 92 93 HTMLButtonElement, 93 94 { 94 95 fullWidth?: boolean; 96 96 + fullWidthOnMobile?: boolean; 95 97 children: React.ReactNode; 96 98 compact?: boolean; 97 99 } & ButtonProps 98 100 >((props, ref) => { 99 99 - let { fullWidth, children, compact, ...buttonProps } = props; 101 101 + let { 102 102 + className, 103 103 + fullWidth, 104 104 + fullWidthOnMobile, 105 105 + compact, 106 106 + children, 107 107 + ...buttonProps 108 108 + } = props; 100 109 return ( 101 110 <button 102 111 {...buttonProps} 103 112 ref={ref} 104 104 - className={`m-0 h-max ${fullWidth ? "w-full" : "w-max"} ${compact ? "px-0" : "px-1"} 105 105 - bg-transparent text-base font-bold text-accent-contrast 106 106 - flex gap-2 items-center justify-center shrink-0 107 107 - hover:underline disabled:text-border 108 108 - ${props.className} 109 109 - `} 113 113 + className={` 114 114 + m-0 h-max 115 115 + ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"} 116 116 + ${compact ? "py-0 px-1" : "px-2 py-0.5 "} 117 117 + bg-transparent hover:bg-[var(--accent-light)] 118 118 + border border-transparent rounded-md hover:border-[var(--accent-light)] 119 119 + outline outline-transparent focus:outline-[var(--accent-light)] hover:outline-[var(--accent-light)] outline-offset-1 120 120 + text-base font-bold text-accent-contrast disabled:text-border 121 121 + flex gap-2 items-center justify-center shrink-0 122 122 + ${props.className} 123 123 + `} 110 124 > 111 125 {children} 112 126 </button>

-173

components/HelpPopover.tsx

··· 1 1 - "use client"; 2 2 - import { ShortcutKey } from "./Layout"; 3 3 - import { Media } from "./Media"; 4 4 - import { Popover } from "./Popover"; 5 5 - import { metaKey } from "src/utils/metaKey"; 6 6 - import { useEntitySetContext } from "./EntitySetProvider"; 7 7 - import { useState } from "react"; 8 8 - import { ActionButton } from "components/ActionBar/ActionButton"; 9 9 - import { HelpSmall } from "./Icons/HelpSmall"; 10 10 - import { isMac } from "src/utils/isDevice"; 11 11 - import { useIsMobile } from "src/hooks/isMobile"; 12 12 - 13 13 - export const HelpPopover = (props: { noShortcuts?: boolean }) => { 14 14 - let entity_set = useEntitySetContext(); 15 15 - let isMobile = useIsMobile(); 16 16 - 17 17 - return entity_set.permissions.write ? ( 18 18 - <Popover 19 19 - side={isMobile ? "top" : "right"} 20 20 - align={isMobile ? "center" : "start"} 21 21 - asChild 22 22 - className="max-w-xs w-full" 23 23 - trigger={<ActionButton icon={<HelpSmall />} label="About" />} 24 24 - > 25 25 - <div className="flex flex-col text-sm gap-2 text-secondary"> 26 26 - {/* about links */} 27 27 - <HelpLink text="📖 Leaflet Manual" url="https://about.leaflet.pub" /> 28 28 - <HelpLink text="💡 Make with Leaflet" url="https://make.leaflet.pub" /> 29 29 - <HelpLink 30 30 - text="✨ Explore Publications" 31 31 - url="https://leaflet.pub/discover" 32 32 - /> 33 33 - <HelpLink text="📣 Newsletter" url="https://buttondown.com/leaflet" /> 34 34 - {/* contact links */} 35 35 - <div className="columns-2 gap-2"> 36 36 - <HelpLink 37 37 - text="🦋 Bluesky" 38 38 - url="https://bsky.app/profile/leaflet.pub" 39 39 - /> 40 40 - <HelpLink text="💌 Email" url="mailto:contact@leaflet.pub" /> 41 41 - </div> 42 42 - {/* keyboard shortcuts: desktop only */} 43 43 - <Media mobile={false}> 44 44 - {!props.noShortcuts && ( 45 45 - <> 46 46 - <hr className="text-border my-1" /> 47 47 - <div className="flex flex-col gap-1"> 48 48 - <Label>Text Shortcuts</Label> 49 49 - <KeyboardShortcut name="Bold" keys={[metaKey(), "B"]} /> 50 50 - <KeyboardShortcut name="Italic" keys={[metaKey(), "I"]} /> 51 51 - <KeyboardShortcut name="Underline" keys={[metaKey(), "U"]} /> 52 52 - <KeyboardShortcut 53 53 - name="Highlight" 54 54 - keys={[metaKey(), isMac() ? "Ctrl" : "Meta", "H"]} 55 55 - /> 56 56 - <KeyboardShortcut 57 57 - name="Strikethrough" 58 58 - keys={[metaKey(), isMac() ? "Ctrl" : "Meta", "X"]} 59 59 - /> 60 60 - <KeyboardShortcut name="Inline Link" keys={[metaKey(), "K"]} /> 61 61 - 62 62 - <Label>Block Shortcuts</Label> 63 63 - {/* shift + up/down arrows (or click + drag): select multiple blocks */} 64 64 - <KeyboardShortcut 65 65 - name="Move Block Up" 66 66 - keys={["Shift", metaKey(), "↑"]} 67 67 - /> 68 68 - <KeyboardShortcut 69 69 - name="Move Block Down" 70 70 - keys={["Shift", metaKey(), "↓"]} 71 71 - /> 72 72 - {/* cmd/ctrl-a: first selects all text in a block; again selects all blocks on page */} 73 73 - {/* cmd/ctrl + up/down arrows: go to beginning / end of doc */} 74 74 - 75 75 - <Label>Canvas Shortcuts</Label> 76 76 - <OtherShortcut name="Add Block" description="Double click" /> 77 77 - <OtherShortcut name="Select Block" description="Long press" /> 78 78 - 79 79 - <Label>Outliner Shortcuts</Label> 80 80 - <KeyboardShortcut 81 81 - name="Make List" 82 82 - keys={[metaKey(), isMac() ? "Opt" : "Alt", "L"]} 83 83 - /> 84 84 - {/* tab / shift + tab: indent / outdent */} 85 85 - <KeyboardShortcut 86 86 - name="Toggle Checkbox" 87 87 - keys={[metaKey(), "Enter"]} 88 88 - /> 89 89 - <KeyboardShortcut 90 90 - name="Toggle Fold" 91 91 - keys={[metaKey(), "Shift", "Enter"]} 92 92 - /> 93 93 - <KeyboardShortcut 94 94 - name="Fold All" 95 95 - keys={[metaKey(), isMac() ? "Opt" : "Alt", "Shift", "↑"]} 96 96 - /> 97 97 - <KeyboardShortcut 98 98 - name="Unfold All" 99 99 - keys={[metaKey(), isMac() ? "Opt" : "Alt", "Shift", "↓"]} 100 100 - /> 101 101 - </div> 102 102 - </> 103 103 - )} 104 104 - </Media> 105 105 - {/* links: terms and privacy */} 106 106 - <hr className="text-border my-1" /> 107 107 - {/* <HelpLink 108 108 - text="Terms and Privacy Policy" 109 109 - url="https://leaflet.pub/legal" 110 110 - /> */} 111 111 - <div> 112 112 - <a href="https://leaflet.pub/legal" target="_blank"> 113 113 - Terms and Privacy Policy 114 114 - </a> 115 115 - </div> 116 116 - </div> 117 117 - </Popover> 118 118 - ) : null; 119 119 - }; 120 120 - 121 121 - const KeyboardShortcut = (props: { name: string; keys: string[] }) => { 122 122 - return ( 123 123 - <div className="flex gap-2 justify-between items-center"> 124 124 - {props.name} 125 125 - <div className="flex gap-1 items-center font-bold"> 126 126 - {props.keys.map((key, index) => { 127 127 - return <ShortcutKey key={index}>{key}</ShortcutKey>; 128 128 - })} 129 129 - </div> 130 130 - </div> 131 131 - ); 132 132 - }; 133 133 - 134 134 - const OtherShortcut = (props: { name: string; description: string }) => { 135 135 - return ( 136 136 - <div className="flex justify-between items-center"> 137 137 - <span>{props.name}</span> 138 138 - <span> 139 139 - <strong>{props.description}</strong> 140 140 - </span> 141 141 - </div> 142 142 - ); 143 143 - }; 144 144 - 145 145 - const Label = (props: { children: React.ReactNode }) => { 146 146 - return <div className="text-tertiary font-bold pt-2 ">{props.children}</div>; 147 147 - }; 148 148 - 149 149 - const HelpLink = (props: { url: string; text: string }) => { 150 150 - const [isHovered, setIsHovered] = useState(false); 151 151 - const handleMouseEnter = () => { 152 152 - setIsHovered(true); 153 153 - }; 154 154 - const handleMouseLeave = () => { 155 155 - setIsHovered(false); 156 156 - }; 157 157 - return ( 158 158 - <a 159 159 - href={props.url} 160 160 - target="_blank" 161 161 - className="py-2 px-2 rounded-md flex flex-col gap-1 bg-border-light hover:bg-border hover:no-underline" 162 162 - style={{ 163 163 - backgroundColor: isHovered 164 164 - ? "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 85%)" 165 165 - : "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 75%)", 166 166 - }} 167 167 - onMouseEnter={handleMouseEnter} 168 168 - onMouseLeave={handleMouseLeave} 169 169 - > 170 170 - <strong>{props.text}</strong> 171 171 - </a> 172 172 - ); 173 173 - };

-77

components/HomeButton.tsx

··· 1 1 - "use client"; 2 2 - import Link from "next/link"; 3 3 - import { useEntitySetContext } from "./EntitySetProvider"; 4 4 - import { ActionButton } from "components/ActionBar/ActionButton"; 5 5 - import { useParams, useSearchParams } from "next/navigation"; 6 6 - import { useIdentityData } from "./IdentityProvider"; 7 7 - import { useReplicache } from "src/replicache"; 8 8 - import { addLeafletToHome } from "actions/addLeafletToHome"; 9 9 - import { useSmoker } from "./Toast"; 10 10 - import { AddToHomeSmall } from "./Icons/AddToHomeSmall"; 11 11 - import { HomeSmall } from "./Icons/HomeSmall"; 12 12 - import { permission } from "process"; 13 13 - 14 14 - export function HomeButton() { 15 15 - let { permissions } = useEntitySetContext(); 16 16 - let searchParams = useSearchParams(); 17 17 - 18 18 - return ( 19 19 - <> 20 20 - <Link 21 21 - href="/home" 22 22 - prefetch 23 23 - className="hover:no-underline" 24 24 - style={{ textDecorationLine: "none !important" }} 25 25 - > 26 26 - <ActionButton icon={<HomeSmall />} label="Go Home" /> 27 27 - </Link> 28 28 - {<AddToHomeButton />} 29 29 - </> 30 30 - ); 31 31 - } 32 32 - 33 33 - const AddToHomeButton = (props: {}) => { 34 34 - let { permission_token } = useReplicache(); 35 35 - let { identity, mutate } = useIdentityData(); 36 36 - let smoker = useSmoker(); 37 37 - if ( 38 38 - identity?.permission_token_on_homepage.find( 39 39 - (pth) => pth.permission_tokens.id === permission_token.id, 40 40 - ) || 41 41 - !identity 42 42 - ) 43 43 - return null; 44 44 - return ( 45 45 - <ActionButton 46 46 - onClick={async (e) => { 47 47 - await addLeafletToHome(permission_token.id); 48 48 - mutate((identity) => { 49 49 - if (!identity) return; 50 50 - return { 51 51 - ...identity, 52 52 - permission_token_on_homepage: [ 53 53 - ...identity.permission_token_on_homepage, 54 54 - { 55 55 - archived: null, 56 56 - created_at: new Date().toISOString(), 57 57 - permission_tokens: { 58 58 - ...permission_token, 59 59 - leaflets_in_publications: [], 60 60 - }, 61 61 - }, 62 62 - ], 63 63 - }; 64 64 - }); 65 65 - smoker({ 66 66 - position: { 67 67 - x: e.clientX + 64, 68 68 - y: e.clientY, 69 69 - }, 70 70 - text: "Leaflet added to your home!", 71 71 - }); 72 72 - }} 73 73 - icon={<AddToHomeSmall />} 74 74 - label="Add to Home" 75 75 - /> 76 76 - ); 77 77 - };

+21

components/Icons/GoBackTiny.tsx

··· 1 1 + import { Props } from "./Props"; 2 2 + 3 3 + export const GoBackTiny = (props: Props) => { 4 4 + return ( 5 5 + <svg 6 6 + width="16" 7 7 + height="16" 8 8 + viewBox="0 0 16 16" 9 9 + fill="none" 10 10 + xmlns="http://www.w3.org/2000/svg" 11 11 + > 12 12 + <path 13 13 + d="M7.40426 3L2.19592 8M2.19592 8L7.40426 13M2.19592 8H13.8041" 14 14 + stroke="currentColor" 15 15 + strokeWidth="2" 16 16 + strokeLinecap="round" 17 17 + strokeLinejoin="round" 18 18 + /> 19 19 + </svg> 20 20 + ); 21 21 + };

+19

components/Icons/LooseleafSmall.tsx

··· 1 1 + import { Props } from "./Props"; 2 2 + 3 3 + export const LooseLeafSmall = (props: Props) => { 4 4 + return ( 5 5 + <svg 6 6 + width="24" 7 7 + height="24" 8 8 + viewBox="0 0 24 24" 9 9 + fill="none" 10 10 + xmlns="http://www.w3.org/2000/svg" 11 11 + {...props} 12 12 + > 13 13 + <path 14 14 + d="M16.5339 4.65788L21.9958 5.24186C22.4035 5.28543 22.7014 5.6481 22.6638 6.05632C22.5159 7.65303 22.3525 9.87767 22.0925 11.9186C21.9621 12.9418 21.805 13.9374 21.6091 14.8034C21.4166 15.6542 21.1733 16.442 20.8454 17.0104C20.1989 18.131 19.0036 18.9569 17.9958 19.4782C17.4793 19.7453 16.9792 19.9495 16.569 20.0827C16.3649 20.1489 16.1724 20.2013 16.0046 20.234C15.8969 20.255 15.7254 20.2816 15.5495 20.2682C15.5466 20.2681 15.5423 20.2684 15.5378 20.2682C15.527 20.2678 15.5112 20.267 15.4919 20.2663C15.4526 20.2647 15.3959 20.2623 15.3239 20.2584C15.1788 20.2506 14.9699 20.2366 14.7116 20.2145C14.1954 20.1703 13.4757 20.0909 12.6598 19.9489C11.0477 19.6681 8.97633 19.1301 7.36198 18.0807C6.70824 17.6557 5.95381 17.064 5.21842 16.4469C5.09798 16.5214 4.97261 16.591 4.81803 16.6706C4.28341 16.9455 3.71779 17.0389 3.17935 16.9137C2.64094 16.7885 2.20091 16.4608 1.89126 16.0231C1.28226 15.1618 1.16463 13.8852 1.5729 12.5514L1.60708 12.4606C1.7005 12.255 1.88295 12.1001 2.10513 12.0436C2.35906 11.9792 2.62917 12.0524 2.81607 12.236L2.82486 12.2448C2.8309 12.2507 2.84033 12.2596 2.8522 12.2712C2.87664 12.295 2.91343 12.3309 2.9606 12.3766C3.05513 12.4682 3.19281 12.6016 3.3649 12.7653C3.70953 13.0931 4.19153 13.5443 4.73795 14.0378C5.84211 15.0349 7.17372 16.1691 8.17937 16.8229C9.53761 17.7059 11.3696 18.2017 12.9177 18.4713C13.6815 18.6043 14.3565 18.679 14.8395 18.7204C15.0804 18.741 15.2731 18.7533 15.404 18.7604C15.4691 18.7639 15.5195 18.7659 15.5524 18.7672C15.5684 18.7679 15.5809 18.7689 15.5886 18.7692H15.5983L15.6374 18.7731C15.6457 18.7724 15.671 18.7704 15.7175 18.7614C15.8087 18.7436 15.9399 18.7095 16.1052 18.6559C16.4345 18.549 16.8594 18.3773 17.3063 18.1461C18.2257 17.6706 19.1147 17.0089 19.5466 16.2604C19.7578 15.8941 19.9618 15.2874 20.1462 14.4723C20.3271 13.6723 20.4767 12.7294 20.6042 11.7292C20.8232 10.0102 20.9711 8.17469 21.1042 6.65397L16.3747 6.14909C15.963 6.10498 15.6648 5.73562 15.7087 5.3239C15.7528 4.91222 16.1222 4.61399 16.5339 4.65788ZM12.0593 13.1315L12.2038 13.1647L12.3776 13.235C12.7592 13.4197 12.9689 13.7541 13.0837 14.0573C13.2089 14.3885 13.2545 14.7654 13.2858 15.0573C13.3144 15.3233 13.3319 15.5214 13.361 15.6774C13.4345 15.6215 13.5233 15.5493 13.6413 15.4479C13.7924 15.318 14.0034 15.1374 14.2429 15.0114C14.4965 14.878 14.8338 14.7772 15.2175 14.8747C15.5354 14.9556 15.7394 15.1539 15.8679 15.3229C15.9757 15.4648 16.0814 15.6631 16.1247 15.736C16.1889 15.8438 16.2218 15.8788 16.239 15.8922C16.2438 15.896 16.2462 15.8979 16.2497 15.8991C16.2541 15.9005 16.2717 15.9049 16.3093 15.9049C16.6541 15.9051 16.934 16.1851 16.9343 16.5299C16.9343 16.875 16.6543 17.1548 16.3093 17.1549C15.9766 17.1549 15.6957 17.0542 15.4694 16.8776C15.2617 16.7153 15.1322 16.5129 15.0505 16.3756C14.9547 16.2147 14.9262 16.1561 14.8815 16.0944C14.8684 16.0989 14.849 16.1051 14.8249 16.1178C14.7289 16.1684 14.6182 16.2555 14.4557 16.3952C14.3175 16.514 14.1171 16.6946 13.9069 16.821C13.6882 16.9524 13.3571 17.0902 12.9684 16.9938C12.4305 16.8602 12.2473 16.3736 12.1764 16.1051C12.1001 15.8159 12.0709 15.4542 12.0427 15.1911C12.0102 14.8884 11.9751 14.662 11.9138 14.4997C11.9011 14.4662 11.8884 14.4403 11.8776 14.4206C11.7899 14.4801 11.6771 14.5721 11.5329 14.7047C11.3855 14.8404 11.181 15.0386 11.0016 15.196C10.8175 15.3575 10.5936 15.5364 10.3512 15.6569C10.19 15.737 9.99118 15.7919 9.77214 15.7594C9.55026 15.7264 9.38367 15.6153 9.27019 15.5045C9.08085 15.3197 8.96362 15.0503 8.91081 14.9391C8.8766 14.8671 8.85074 14.814 8.82585 14.7692C8.541 14.777 8.27798 14.5891 8.20378 14.3014C8.11797 13.9674 8.31907 13.6269 8.653 13.5407L8.79558 13.5124C8.93966 13.4936 9.0875 13.5034 9.23308 13.5485C9.42396 13.6076 9.569 13.7155 9.67449 13.8239C9.85113 14.0055 9.96389 14.244 10.027 14.3776C10.0723 14.3417 10.124 14.3034 10.1774 14.2565C10.3474 14.1073 10.4942 13.9615 10.6862 13.7848C10.8571 13.6276 11.0614 13.4475 11.2731 13.32C11.4428 13.2178 11.7294 13.081 12.0593 13.1315ZM2.84537 14.3366C2.88081 14.6965 2.98677 14.9742 3.11588 15.1569C3.24114 15.334 3.38295 15.4211 3.5192 15.4528C3.63372 15.4794 3.79473 15.4775 4.00553 15.3932C3.9133 15.3109 3.82072 15.2311 3.73209 15.151C3.40947 14.8597 3.10909 14.5828 2.84537 14.3366ZM8.73601 3.86003C9.14672 3.91292 9.43715 4.28918 9.38445 4.69987C9.25964 5.66903 9.14642 7.35598 8.87077 9.02018C8.59001 10.7151 8.11848 12.5766 7.20085 14.1003C6.98712 14.4551 6.52539 14.5698 6.17057 14.3561C5.81623 14.1423 5.70216 13.6814 5.91569 13.3268C6.68703 12.0463 7.121 10.4066 7.39128 8.77506C7.66663 7.11265 7.74965 5.64618 7.89616 4.50847C7.94916 4.09794 8.32546 3.80744 8.73601 3.86003ZM11.7614 8.36784C12.1238 8.21561 12.4973 8.25977 12.8054 8.46452C13.0762 8.64474 13.2601 8.92332 13.3884 9.18912C13.5214 9.46512 13.6241 9.79028 13.7009 10.1354C13.7561 10.3842 13.7827 10.6162 13.8034 10.8044C13.8257 11.0069 13.8398 11.1363 13.864 11.2438C13.8806 11.3174 13.8959 11.3474 13.9011 11.3561C13.9095 11.3609 13.9289 11.3695 13.9655 11.3786C14.0484 11.3991 14.0814 11.3929 14.0895 11.3913C14.1027 11.3885 14.1323 11.3804 14.2028 11.3366C14.3137 11.2677 14.6514 11.0042 15.0563 10.8288L15.1364 10.7985C15.3223 10.7392 15.4987 10.7526 15.6335 10.7838C15.7837 10.8188 15.918 10.883 16.0231 10.9421C16.2276 11.057 16.4458 11.2251 16.613 11.3503C16.8019 11.4917 16.9527 11.5999 17.0827 11.6676C17.1539 11.7047 17.1908 11.7142 17.2009 11.7165L17.2849 11.7047C17.5751 11.6944 17.8425 11.8891 17.9138 12.1823C17.995 12.5174 17.7897 12.8554 17.4548 12.9372C17.0733 13.0299 16.7253 12.8909 16.5046 12.776C16.2705 12.6541 16.042 12.4845 15.864 12.3512C15.6704 12.2064 15.5344 12.1038 15.4216 12.0387C15.2178 12.1436 15.1125 12.2426 14.862 12.3981C14.7283 12.4811 14.5564 12.5716 14.3415 12.6159C14.1216 12.6611 13.8975 12.6501 13.6647 12.5924C13.3819 12.5222 13.1344 12.3858 12.9479 12.1657C12.7701 11.9555 12.689 11.7172 12.6442 11.5182C12.601 11.3259 12.58 11.112 12.5612 10.9411C12.5408 10.7561 12.5194 10.5827 12.4802 10.4059C12.4169 10.1215 12.3411 9.89526 12.2624 9.73209C12.2296 9.66404 12.1981 9.61255 12.1716 9.57487C12.1263 9.61576 12.0615 9.68493 11.9802 9.7985C11.8864 9.92952 11.7821 10.0922 11.6589 10.2838C11.5393 10.4698 11.4043 10.6782 11.2634 10.8786C11.123 11.0782 10.9664 11.2843 10.7975 11.4635C10.633 11.6381 10.4285 11.8185 10.1862 11.9342C9.87476 12.0828 9.50095 11.9507 9.35222 11.6393C9.20377 11.3279 9.33594 10.9551 9.64714 10.8063C9.69148 10.7851 9.77329 10.7282 9.88835 10.6061C9.99931 10.4883 10.1167 10.3365 10.2409 10.1598C10.3647 9.98378 10.4855 9.79617 10.6071 9.60709C10.7249 9.42397 10.8479 9.23258 10.9636 9.07096C11.1814 8.76677 11.4424 8.50191 11.7614 8.36784ZM12.4304 2.81218C13.631 2.81246 14.6042 3.78628 14.6042 4.98698C14.6041 5.39899 14.4869 5.78271 14.2878 6.111L15.0007 6.9069C15.2772 7.21532 15.2515 7.689 14.9431 7.96549C14.6347 8.24164 14.1609 8.21606 13.8845 7.90788L13.1139 7.0485C12.8988 7.11984 12.6695 7.16075 12.4304 7.16081C11.2296 7.16081 10.2558 6.18766 10.2555 4.98698C10.2555 3.7861 11.2295 2.81218 12.4304 2.81218ZM12.4304 4.31218C12.0579 4.31218 11.7555 4.61453 11.7555 4.98698C11.7558 5.35924 12.058 5.66081 12.4304 5.66081C12.8024 5.66053 13.104 5.35907 13.1042 4.98698C13.1042 4.6147 12.8026 4.31246 12.4304 4.31218Z" 15 15 + fill="currentColor" 16 16 + /> 17 17 + </svg> 18 18 + ); 19 19 + };

+19

components/Icons/TagTiny.tsx

··· 1 1 + import { Props } from "./Props"; 2 2 + 3 3 + export const TagTiny = (props: Props) => { 4 4 + return ( 5 5 + <svg 6 6 + width="16" 7 7 + height="16" 8 8 + viewBox="0 0 16 16" 9 9 + fill="none" 10 10 + xmlns="http://www.w3.org/2000/svg" 11 11 + {...props} 12 12 + > 13 13 + <path 14 14 + d="M3.70775 9.003C3.96622 8.90595 4.25516 9.03656 4.35228 9.29499C4.37448 9.35423 4.38309 9.41497 4.38255 9.47468C4.38208 9.6765 4.25946 9.86621 4.05931 9.94148C3.36545 10.2021 2.74535 10.833 2.42747 11.5479C2.33495 11.7561 2.27242 11.9608 2.239 12.1573C2.15817 12.6374 2.25357 13.069 2.52513 13.3858C2.92043 13.8467 3.51379 14.0403 4.20189 14.0665C4.88917 14.0925 5.59892 13.9482 6.12571 13.8126C7.09158 13.5639 7.81893 13.6157 8.29954 13.9415C8.67856 14.1986 8.83462 14.578 8.8347 14.9298C8.83502 15.0506 8.81652 15.1682 8.78294 15.2764C8.7009 15.5398 8.42049 15.6873 8.15696 15.6055C7.89935 15.5253 7.75386 15.2555 7.82396 14.9971C7.82572 14.9905 7.8258 14.9833 7.82786 14.9766C7.83167 14.9643 7.834 14.9503 7.8347 14.9356C7.83623 14.8847 7.8147 14.823 7.739 14.7716C7.61179 14.6853 7.23586 14.5616 6.37474 14.7833C5.81779 14.9266 4.99695 15.1 4.1638 15.0684C3.33126 15.0368 2.41412 14.7967 1.76536 14.0401C1.30175 13.4992 1.16206 12.8427 1.22728 12.1993C1.23863 12.086 1.25554 11.9732 1.27903 11.8614C1.28235 11.8457 1.28624 11.8302 1.28978 11.8145C1.34221 11.5817 1.41832 11.3539 1.51439 11.1378C1.92539 10.2136 2.72927 9.37064 3.70775 9.003ZM13.8972 7.54695C14.124 7.38948 14.4359 7.44622 14.5935 7.67292C14.7508 7.89954 14.6948 8.21063 14.4685 8.36823L8.65892 12.4044C8.24041 12.695 7.74265 12.8515 7.23314 12.8516H3.9138C3.63794 12.8515 3.41315 12.6274 3.41282 12.3516C3.41282 12.0755 3.63769 11.8517 3.9138 11.8516H7.23216C7.538 11.8516 7.8374 11.7575 8.0886 11.5831L13.8972 7.54695ZM10.1609 0.550851C10.6142 0.235853 11.2372 0.347685 11.5525 0.800851L14.6091 5.19734C14.9239 5.65063 14.8121 6.27369 14.3591 6.58894L7.88841 11.087C7.63297 11.2645 7.32837 11.3586 7.01732 11.3555L4.1804 11.3262C3.76371 11.3218 3.38443 11.1921 3.072 10.9776C3.23822 10.7748 3.43062 10.5959 3.63646 10.4503C3.96958 10.5767 4.35782 10.5421 4.67259 10.3233C5.17899 9.97084 5.30487 9.27438 4.95286 8.76765C4.60048 8.26108 3.90304 8.13639 3.39622 8.48835C3.17656 8.64127 3.02799 8.85895 2.9597 9.09773C2.69658 9.26211 2.45194 9.45783 2.23118 9.67585C2.17892 9.38285 2.19133 9.07163 2.28294 8.76081L3.14818 5.8282C3.24483 5.50092 3.45101 5.21639 3.73118 5.02155L10.1609 0.550851ZM8.76732 3.73835L9.73607 4.91023L8.68626 5.41804L7.79466 6.24323L7.04857 4.91804L6.26634 5.45417L7.22923 6.63386L5.72337 7.40437L6.34739 8.31355L7.60814 7.18464L8.37767 8.53132L9.15989 7.99421L8.17454 6.79792L9.27708 6.25788L10.1179 5.46589L10.8786 6.81452L11.6609 6.27741L10.6745 5.07917L12.1882 4.30476L11.5642 3.39558L10.2976 4.52839L9.54954 3.20124L8.76732 3.73835Z" 15 15 + fill="currentColor" 16 16 + /> 17 17 + </svg> 18 18 + ); 19 19 + };

+11 -36

components/Input.tsx

··· 2 2 import { useEffect, useRef, useState, type JSX } from "react"; 3 3 import { onMouseDown } from "src/utils/iosInputMouseDown"; 4 4 import { isIOS } from "src/utils/isDevice"; 5 5 + import { focusElement } from "src/utils/focusElement"; 5 6 6 7 export const Input = ( 7 8 props: { ··· 58 59 ); 59 60 }; 60 61 61 61 - export const focusElement = (el?: HTMLInputElement | null) => { 62 62 - if (!isIOS()) { 63 63 - el?.focus(); 64 64 - return; 65 65 - } 66 66 - 67 67 - let fakeInput = document.createElement("input"); 68 68 - fakeInput.setAttribute("type", "text"); 69 69 - fakeInput.style.position = "fixed"; 70 70 - fakeInput.style.height = "0px"; 71 71 - fakeInput.style.width = "0px"; 72 72 - fakeInput.style.fontSize = "16px"; // disable auto zoom 73 73 - document.body.appendChild(fakeInput); 74 74 - fakeInput.focus(); 75 75 - setTimeout(() => { 76 76 - if (!el) return; 77 77 - el.style.transform = "translateY(-2000px)"; 78 78 - el?.focus(); 79 79 - fakeInput.remove(); 80 80 - el.value = " "; 81 81 - el.setSelectionRange(1, 1); 82 82 - requestAnimationFrame(() => { 83 83 - if (el) { 84 84 - el.style.transform = ""; 85 85 - } 86 86 - }); 87 87 - setTimeout(() => { 88 88 - if (!el) return; 89 89 - el.value = ""; 90 90 - el.setSelectionRange(0, 0); 91 91 - }, 50); 92 92 - }, 20); 93 93 - }; 94 94 - 95 62 export const InputWithLabel = ( 96 63 props: { 97 64 label: string; ··· 100 67 JSX.IntrinsicElements["textarea"], 101 68 ) => { 102 69 let { label, textarea, ...inputProps } = props; 103 103 - let style = `appearance-none w-full font-normal not-italic bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none`; 70 70 + let style = ` 71 71 + appearance-none resize-none w-full 72 72 + bg-transparent 73 73 + outline-hidden focus:outline-0 74 74 + font-normal not-italic text-base text-primary disabled:text-tertiary 75 75 + disabled:cursor-not-allowed 76 76 + ${props.className}`; 104 77 return ( 105 105 - <label className=" input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]!"> 78 78 + <label 79 79 + className={`input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]! ${props.disabled && "bg-border-light! cursor-not-allowed! hover:border-border!"}`} 80 80 + > 106 81 {props.label} 107 82 {textarea ? ( 108 83 <textarea {...inputProps} className={style} />

+114

components/InteractionsPreview.tsx

··· 1 1 + "use client"; 2 2 + import { Separator } from "./Layout"; 3 3 + import { CommentTiny } from "./Icons/CommentTiny"; 4 4 + import { QuoteTiny } from "./Icons/QuoteTiny"; 5 5 + import { useSmoker } from "./Toast"; 6 6 + import { Tag } from "./Tags"; 7 7 + import { Popover } from "./Popover"; 8 8 + import { TagTiny } from "./Icons/TagTiny"; 9 9 + import { SpeedyLink } from "./SpeedyLink"; 10 10 + 11 11 + export const InteractionPreview = (props: { 12 12 + quotesCount: number; 13 13 + commentsCount: number; 14 14 + tags?: string[]; 15 15 + postUrl: string; 16 16 + showComments: boolean | undefined; 17 17 + share?: boolean; 18 18 + }) => { 19 19 + let smoker = useSmoker(); 20 20 + let interactionsAvailable = 21 21 + props.quotesCount > 0 || 22 22 + (props.showComments !== false && props.commentsCount > 0); 23 23 + 24 24 + const tagsCount = props.tags?.length || 0; 25 25 + 26 26 + return ( 27 27 + <div 28 28 + className={`flex gap-2 text-tertiary text-sm items-center self-start`} 29 29 + > 30 30 + {tagsCount === 0 ? null : ( 31 31 + <> 32 32 + <TagPopover tags={props.tags!} /> 33 33 + {interactionsAvailable || props.share ? ( 34 34 + <Separator classname="h-4!" /> 35 35 + ) : null} 36 36 + </> 37 37 + )} 38 38 + 39 39 + {props.quotesCount === 0 ? null : ( 40 40 + <SpeedyLink 41 41 + aria-label="Post quotes" 42 42 + href={`${props.postUrl}?interactionDrawer=quotes`} 43 43 + className="flex flex-row gap-1 text-sm items-center text-accent-contrast!" 44 44 + > 45 45 + <QuoteTiny /> {props.quotesCount} 46 46 + </SpeedyLink> 47 47 + )} 48 48 + {props.showComments === false || props.commentsCount === 0 ? null : ( 49 49 + <SpeedyLink 50 50 + aria-label="Post comments" 51 51 + href={`${props.postUrl}?interactionDrawer=comments`} 52 52 + className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast hover:no-underline! text-tertiary" 53 53 + > 54 54 + <CommentTiny /> {props.commentsCount} 55 55 + </SpeedyLink> 56 56 + )} 57 57 + {interactionsAvailable && props.share ? ( 58 58 + <Separator classname="h-4! !min-h-0" /> 59 59 + ) : null} 60 60 + {props.share && ( 61 61 + <> 62 62 + <button 63 63 + id={`copy-post-link-${props.postUrl}`} 64 64 + className="flex gap-1 items-center hover:text-accent-contrast relative" 65 65 + onClick={(e) => { 66 66 + e.stopPropagation(); 67 67 + e.preventDefault(); 68 68 + let mouseX = e.clientX; 69 69 + let mouseY = e.clientY; 70 70 + 71 71 + if (!props.postUrl) return; 72 72 + navigator.clipboard.writeText(`leaflet.pub${props.postUrl}`); 73 73 + 74 74 + smoker({ 75 75 + text: <strong>Copied Link!</strong>, 76 76 + position: { 77 77 + y: mouseY, 78 78 + x: mouseX, 79 79 + }, 80 80 + }); 81 81 + }} 82 82 + > 83 83 + Share 84 84 + </button> 85 85 + </> 86 86 + )} 87 87 + </div> 88 88 + ); 89 89 + }; 90 90 + 91 91 + const TagPopover = (props: { tags: string[] }) => { 92 92 + return ( 93 93 + <Popover 94 94 + className="p-2! max-w-xs" 95 95 + trigger={ 96 96 + <div className="relative flex gap-1 items-center hover:text-accent-contrast "> 97 97 + <TagTiny /> {props.tags.length} 98 98 + </div> 99 99 + } 100 100 + > 101 101 + <TagList tags={props.tags} className="text-secondary!" /> 102 102 + </Popover> 103 103 + ); 104 104 + }; 105 105 + 106 106 + const TagList = (props: { tags: string[]; className?: string }) => { 107 107 + return ( 108 108 + <div className="flex gap-1 flex-wrap"> 109 109 + {props.tags.map((tag, index) => ( 110 110 + <Tag name={tag} key={index} className={props.className} /> 111 111 + ))} 112 112 + </div> 113 113 + ); 114 114 + };

+2 -1

components/Layout.tsx

··· 1 1 + "use client"; 1 2 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; 2 3 import { theme } from "tailwind.config"; 3 4 import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider"; 4 5 import { PopoverArrow } from "./Icons/PopoverArrow"; 5 5 - import { PopoverOpenContext } from "./Popover"; 6 6 + import { PopoverOpenContext } from "./Popover/PopoverContext"; 6 7 import { useState } from "react"; 7 8 8 9 export const Separator = (props: { classname?: string }) => {

+543

components/Mention.tsx

··· 1 1 + "use client"; 2 2 + import { Agent } from "@atproto/api"; 3 3 + import { useState, useEffect, Fragment, useRef, useCallback } from "react"; 4 4 + import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 5 5 + import * as Popover from "@radix-ui/react-popover"; 6 6 + import { EditorView } from "prosemirror-view"; 7 7 + import { callRPC } from "app/api/rpc/client"; 8 8 + import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; 9 9 + import { GoBackSmall } from "components/Icons/GoBackSmall"; 10 10 + import { SearchTiny } from "components/Icons/SearchTiny"; 11 11 + import { CloseTiny } from "./Icons/CloseTiny"; 12 12 + import { GoToArrow } from "./Icons/GoToArrow"; 13 13 + import { GoBackTiny } from "./Icons/GoBackTiny"; 14 14 + 15 15 + export function MentionAutocomplete(props: { 16 16 + open: boolean; 17 17 + onOpenChange: (open: boolean) => void; 18 18 + view: React.RefObject<EditorView | null>; 19 19 + onSelect: (mention: Mention) => void; 20 20 + coords: { top: number; left: number } | null; 21 21 + placeholder?: string; 22 22 + }) { 23 23 + const [searchQuery, setSearchQuery] = useState(""); 24 24 + const [noResults, setNoResults] = useState(false); 25 25 + const inputRef = useRef<HTMLInputElement>(null); 26 26 + const contentRef = useRef<HTMLDivElement>(null); 27 27 + 28 28 + const { suggestionIndex, setSuggestionIndex, suggestions, scope, setScope } = 29 29 + useMentionSuggestions(searchQuery); 30 30 + 31 31 + // Clear search when scope changes 32 32 + const handleScopeChange = useCallback( 33 33 + (newScope: MentionScope) => { 34 34 + setSearchQuery(""); 35 35 + setSuggestionIndex(0); 36 36 + setScope(newScope); 37 37 + }, 38 38 + [setScope, setSuggestionIndex], 39 39 + ); 40 40 + 41 41 + // Focus input when opened 42 42 + useEffect(() => { 43 43 + if (props.open && inputRef.current) { 44 44 + // Small delay to ensure the popover is mounted 45 45 + setTimeout(() => inputRef.current?.focus(), 0); 46 46 + } 47 47 + }, [props.open]); 48 48 + 49 49 + // Reset state when closed 50 50 + useEffect(() => { 51 51 + if (!props.open) { 52 52 + setSearchQuery(""); 53 53 + setScope({ type: "default" }); 54 54 + setSuggestionIndex(0); 55 55 + setNoResults(false); 56 56 + } 57 57 + }, [props.open, setScope, setSuggestionIndex]); 58 58 + 59 59 + // Handle timeout for showing "No results found" 60 60 + useEffect(() => { 61 61 + if (searchQuery && suggestions.length === 0) { 62 62 + setNoResults(false); 63 63 + const timer = setTimeout(() => { 64 64 + setNoResults(true); 65 65 + }, 2000); 66 66 + return () => clearTimeout(timer); 67 67 + } else { 68 68 + setNoResults(false); 69 69 + } 70 70 + }, [searchQuery, suggestions.length]); 71 71 + 72 72 + // Handle keyboard navigation 73 73 + const handleKeyDown = (e: React.KeyboardEvent) => { 74 74 + if (e.key === "Escape") { 75 75 + e.preventDefault(); 76 76 + props.onOpenChange(false); 77 77 + props.view.current?.focus(); 78 78 + return; 79 79 + } 80 80 + 81 81 + if (e.key === "Backspace" && searchQuery === "") { 82 82 + // Backspace at the start of input closes autocomplete and refocuses editor 83 83 + e.preventDefault(); 84 84 + props.onOpenChange(false); 85 85 + props.view.current?.focus(); 86 86 + return; 87 87 + } 88 88 + 89 89 + // Reverse arrow key direction when popover is rendered above 90 90 + const isReversed = contentRef.current?.dataset.side === "top"; 91 91 + const upKey = isReversed ? "ArrowDown" : "ArrowUp"; 92 92 + const downKey = isReversed ? "ArrowUp" : "ArrowDown"; 93 93 + 94 94 + if (e.key === upKey) { 95 95 + e.preventDefault(); 96 96 + if (suggestionIndex > 0) { 97 97 + setSuggestionIndex((i) => i - 1); 98 98 + } 99 99 + } else if (e.key === downKey) { 100 100 + e.preventDefault(); 101 101 + if (suggestionIndex < suggestions.length - 1) { 102 102 + setSuggestionIndex((i) => i + 1); 103 103 + } 104 104 + } else if (e.key === "Tab") { 105 105 + const selectedSuggestion = suggestions[suggestionIndex]; 106 106 + if (selectedSuggestion?.type === "publication") { 107 107 + e.preventDefault(); 108 108 + handleScopeChange({ 109 109 + type: "publication", 110 110 + uri: selectedSuggestion.uri, 111 111 + name: selectedSuggestion.name, 112 112 + }); 113 113 + } 114 114 + } else if (e.key === "Enter") { 115 115 + e.preventDefault(); 116 116 + const selectedSuggestion = suggestions[suggestionIndex]; 117 117 + if (selectedSuggestion) { 118 118 + props.onSelect(selectedSuggestion); 119 119 + props.onOpenChange(false); 120 120 + } 121 121 + } else if ( 122 122 + e.key === " " && 123 123 + searchQuery === "" && 124 124 + scope.type === "default" 125 125 + ) { 126 126 + // Space immediately after opening closes the autocomplete 127 127 + e.preventDefault(); 128 128 + props.onOpenChange(false); 129 129 + // Insert a space after the @ in the editor 130 130 + if (props.view.current) { 131 131 + const view = props.view.current; 132 132 + const tr = view.state.tr.insertText(" "); 133 133 + view.dispatch(tr); 134 134 + view.focus(); 135 135 + } 136 136 + } 137 137 + }; 138 138 + 139 139 + if (!props.open || !props.coords) return null; 140 140 + 141 141 + const getHeader = (type: Mention["type"], scope?: MentionScope) => { 142 142 + switch (type) { 143 143 + case "did": 144 144 + return "People"; 145 145 + case "publication": 146 146 + return "Publications"; 147 147 + case "post": 148 148 + if (scope) { 149 149 + return ( 150 150 + <ScopeHeader 151 151 + scope={scope} 152 152 + handleScopeChange={() => { 153 153 + handleScopeChange({ type: "default" }); 154 154 + }} 155 155 + /> 156 156 + ); 157 157 + } else return "Posts"; 158 158 + } 159 159 + }; 160 160 + 161 161 + const sortedSuggestions = [...suggestions].sort((a, b) => { 162 162 + const order: Mention["type"][] = ["did", "publication", "post"]; 163 163 + return order.indexOf(a.type) - order.indexOf(b.type); 164 164 + }); 165 165 + 166 166 + return ( 167 167 + <Popover.Root open> 168 168 + <Popover.Anchor 169 169 + style={{ 170 170 + top: props.coords.top - 24, 171 171 + left: props.coords.left, 172 172 + height: 24, 173 173 + position: "absolute", 174 174 + }} 175 175 + /> 176 176 + <Popover.Portal> 177 177 + <Popover.Content 178 178 + ref={contentRef} 179 179 + align="start" 180 180 + sideOffset={4} 181 181 + collisionPadding={32} 182 182 + onOpenAutoFocus={(e) => e.preventDefault()} 183 183 + className={`dropdownMenu group/mention-menu z-20 bg-bg-page 184 184 + flex data-[side=top]:flex-col-reverse flex-col 185 185 + p-1 gap-1 text-primary 186 186 + border border-border rounded-md shadow-md 187 187 + sm:max-w-xs w-[1000px] max-w-(--radix-popover-content-available-width) 188 188 + max-h-(--radix-popover-content-available-height) 189 189 + overflow-hidden`} 190 190 + > 191 191 + {/* Dropdown Header - sticky */} 192 192 + <div className="flex flex-col items-center gap-2 px-2 py-1 border-b group-data-[side=top]/mention-menu:border-b-0 group-data-[side=top]/mention-menu:border-t border-border-light bg-bg-page sticky top-0 group-data-[side=top]/mention-menu:sticky group-data-[side=top]/mention-menu:bottom-0 group-data-[side=top]/mention-menu:top-auto z-10 shrink-0"> 193 193 + <div className="flex items-center gap-1 flex-1 min-w-0 text-primary"> 194 194 + <div className="text-tertiary"> 195 195 + <SearchTiny className="w-4 h-4 shrink-0" /> 196 196 + </div> 197 197 + <input 198 198 + ref={inputRef} 199 199 + size={100} 200 200 + type="text" 201 201 + value={searchQuery} 202 202 + onChange={(e) => { 203 203 + setSearchQuery(e.target.value); 204 204 + setSuggestionIndex(0); 205 205 + }} 206 206 + onKeyDown={handleKeyDown} 207 207 + autoFocus 208 208 + placeholder={ 209 209 + scope.type === "publication" 210 210 + ? "Search posts..." 211 211 + : props.placeholder ?? "Search people & publications..." 212 212 + } 213 213 + className="flex-1 w-full min-w-0 bg-transparent border-none outline-none text-sm placeholder:text-tertiary" 214 214 + /> 215 215 + </div> 216 216 + </div> 217 217 + <div className="overflow-y-auto flex-1 min-h-0"> 218 218 + {sortedSuggestions.length === 0 && noResults && ( 219 219 + <div className="text-sm text-tertiary italic px-3 py-1 text-center"> 220 220 + No results found 221 221 + </div> 222 222 + )} 223 223 + <ul className="list-none p-0 text-sm flex flex-col group-data-[side=top]/mention-menu:flex-col-reverse"> 224 224 + {sortedSuggestions.map((result, index) => { 225 225 + const prevResult = sortedSuggestions[index - 1]; 226 226 + const showHeader = 227 227 + index === 0 || 228 228 + (prevResult && prevResult.type !== result.type); 229 229 + 230 230 + return ( 231 231 + <Fragment 232 232 + key={result.type === "did" ? result.did : result.uri} 233 233 + > 234 234 + {showHeader && ( 235 235 + <> 236 236 + {index > 0 && ( 237 237 + <hr className="border-border-light mx-1 my-1" /> 238 238 + )} 239 239 + <div className="text-xs text-tertiary font-bold pt-1 px-2"> 240 240 + {getHeader(result.type, scope)} 241 241 + </div> 242 242 + </> 243 243 + )} 244 244 + {result.type === "did" ? ( 245 245 + <DidResult 246 246 + onClick={() => { 247 247 + props.onSelect(result); 248 248 + props.onOpenChange(false); 249 249 + }} 250 250 + onMouseDown={(e) => e.preventDefault()} 251 251 + displayName={result.displayName} 252 252 + handle={result.handle} 253 253 + avatar={result.avatar} 254 254 + selected={index === suggestionIndex} 255 255 + /> 256 256 + ) : result.type === "publication" ? ( 257 257 + <PublicationResult 258 258 + onClick={() => { 259 259 + props.onSelect(result); 260 260 + props.onOpenChange(false); 261 261 + }} 262 262 + onMouseDown={(e) => e.preventDefault()} 263 263 + pubName={result.name} 264 264 + uri={result.uri} 265 265 + selected={index === suggestionIndex} 266 266 + onPostsClick={() => { 267 267 + handleScopeChange({ 268 268 + type: "publication", 269 269 + uri: result.uri, 270 270 + name: result.name, 271 271 + }); 272 272 + }} 273 273 + /> 274 274 + ) : ( 275 275 + <PostResult 276 276 + onClick={() => { 277 277 + props.onSelect(result); 278 278 + props.onOpenChange(false); 279 279 + }} 280 280 + onMouseDown={(e) => e.preventDefault()} 281 281 + title={result.title} 282 282 + selected={index === suggestionIndex} 283 283 + /> 284 284 + )} 285 285 + </Fragment> 286 286 + ); 287 287 + })} 288 288 + </ul> 289 289 + </div> 290 290 + </Popover.Content> 291 291 + </Popover.Portal> 292 292 + </Popover.Root> 293 293 + ); 294 294 + } 295 295 + 296 296 + const Result = (props: { 297 297 + result: React.ReactNode; 298 298 + subtext?: React.ReactNode; 299 299 + icon?: React.ReactNode; 300 300 + onClick: () => void; 301 301 + onMouseDown: (e: React.MouseEvent) => void; 302 302 + selected?: boolean; 303 303 + }) => { 304 304 + return ( 305 305 + <button 306 306 + className={` 307 307 + menuItem w-full flex-row! gap-2! 308 308 + text-secondary leading-snug text-sm 309 309 + ${props.subtext ? "py-1!" : "py-2!"} 310 310 + ${props.selected ? "bg-[var(--accent-light)]!" : ""}`} 311 311 + onClick={() => { 312 312 + props.onClick(); 313 313 + }} 314 314 + onMouseDown={(e) => props.onMouseDown(e)} 315 315 + > 316 316 + {props.icon} 317 317 + <div className="flex flex-col min-w-0 flex-1"> 318 318 + <div 319 319 + className={`flex gap-2 items-center w-full truncate justify-between`} 320 320 + > 321 321 + {props.result} 322 322 + </div> 323 323 + {props.subtext && ( 324 324 + <div className="text-tertiary italic text-xs font-normal min-w-0 truncate pb-[1px]"> 325 325 + {props.subtext} 326 326 + </div> 327 327 + )} 328 328 + </div> 329 329 + </button> 330 330 + ); 331 331 + }; 332 332 + 333 333 + const ScopeButton = (props: { 334 334 + onClick: () => void; 335 335 + children: React.ReactNode; 336 336 + }) => { 337 337 + return ( 338 338 + <span 339 339 + className="flex flex-row items-center h-full shrink-0 text-xs font-normal text-tertiary hover:text-accent-contrast cursor-pointer" 340 340 + onClick={(e) => { 341 341 + e.preventDefault(); 342 342 + e.stopPropagation(); 343 343 + props.onClick(); 344 344 + }} 345 345 + onMouseDown={(e) => { 346 346 + e.preventDefault(); 347 347 + e.stopPropagation(); 348 348 + }} 349 349 + > 350 350 + {props.children} <ArrowRightTiny className="scale-80" /> 351 351 + </span> 352 352 + ); 353 353 + }; 354 354 + 355 355 + const DidResult = (props: { 356 356 + displayName?: string; 357 357 + handle: string; 358 358 + avatar?: string; 359 359 + onClick: () => void; 360 360 + onMouseDown: (e: React.MouseEvent) => void; 361 361 + selected?: boolean; 362 362 + }) => { 363 363 + return ( 364 364 + <Result 365 365 + icon={ 366 366 + props.avatar ? ( 367 367 + <img 368 368 + src={props.avatar} 369 369 + alt="" 370 370 + className="w-5 h-5 rounded-full shrink-0" 371 371 + /> 372 372 + ) : ( 373 373 + <div className="w-5 h-5 rounded-full bg-border shrink-0" /> 374 374 + ) 375 375 + } 376 376 + result={props.displayName ? props.displayName : props.handle} 377 377 + subtext={props.displayName && `@${props.handle}`} 378 378 + onClick={props.onClick} 379 379 + onMouseDown={props.onMouseDown} 380 380 + selected={props.selected} 381 381 + /> 382 382 + ); 383 383 + }; 384 384 + 385 385 + const PublicationResult = (props: { 386 386 + pubName: string; 387 387 + uri: string; 388 388 + onClick: () => void; 389 389 + onMouseDown: (e: React.MouseEvent) => void; 390 390 + selected?: boolean; 391 391 + onPostsClick: () => void; 392 392 + }) => { 393 393 + return ( 394 394 + <Result 395 395 + icon={ 396 396 + <img 397 397 + src={`/api/pub_icon?at_uri=${encodeURIComponent(props.uri)}`} 398 398 + alt="" 399 399 + className="w-5 h-5 rounded-full shrink-0" 400 400 + /> 401 401 + } 402 402 + result={ 403 403 + <> 404 404 + <div className="truncate w-full grow min-w-0">{props.pubName}</div> 405 405 + <ScopeButton onClick={props.onPostsClick}>Posts</ScopeButton> 406 406 + </> 407 407 + } 408 408 + onClick={props.onClick} 409 409 + onMouseDown={props.onMouseDown} 410 410 + selected={props.selected} 411 411 + /> 412 412 + ); 413 413 + }; 414 414 + 415 415 + const PostResult = (props: { 416 416 + title: string; 417 417 + onClick: () => void; 418 418 + onMouseDown: (e: React.MouseEvent) => void; 419 419 + selected?: boolean; 420 420 + }) => { 421 421 + return ( 422 422 + <Result 423 423 + result={<div className="truncate w-full">{props.title}</div>} 424 424 + onClick={props.onClick} 425 425 + onMouseDown={props.onMouseDown} 426 426 + selected={props.selected} 427 427 + /> 428 428 + ); 429 429 + }; 430 430 + 431 431 + const ScopeHeader = (props: { 432 432 + scope: MentionScope; 433 433 + handleScopeChange: () => void; 434 434 + }) => { 435 435 + if (props.scope.type === "default") return; 436 436 + if (props.scope.type === "publication") 437 437 + return ( 438 438 + <button 439 439 + className="w-full flex flex-row gap-2 pt-1 rounded text-tertiary hover:text-accent-contrast shrink-0 text-xs" 440 440 + onClick={() => props.handleScopeChange()} 441 441 + onMouseDown={(e) => e.preventDefault()} 442 442 + > 443 443 + <GoBackTiny className="shrink-0 " /> 444 444 + 445 445 + <div className="grow w-full truncate text-left"> 446 446 + Posts from {props.scope.name} 447 447 + </div> 448 448 + </button> 449 449 + ); 450 450 + }; 451 451 + 452 452 + export type Mention = 453 453 + | { 454 454 + type: "did"; 455 455 + handle: string; 456 456 + did: string; 457 457 + displayName?: string; 458 458 + avatar?: string; 459 459 + } 460 460 + | { type: "publication"; uri: string; name: string; url: string } 461 461 + | { type: "post"; uri: string; title: string; url: string }; 462 462 + 463 463 + export type MentionScope = 464 464 + | { type: "default" } 465 465 + | { type: "publication"; uri: string; name: string }; 466 466 + function useMentionSuggestions(query: string | null) { 467 467 + const [suggestionIndex, setSuggestionIndex] = useState(0); 468 468 + const [suggestions, setSuggestions] = useState<Array<Mention>>([]); 469 469 + const [scope, setScope] = useState<MentionScope>({ type: "default" }); 470 470 + 471 471 + // Clear suggestions immediately when scope changes 472 472 + const setScopeAndClear = useCallback((newScope: MentionScope) => { 473 473 + setSuggestions([]); 474 474 + setScope(newScope); 475 475 + }, []); 476 476 + 477 477 + useDebouncedEffect( 478 478 + async () => { 479 479 + if (!query && scope.type === "default") { 480 480 + setSuggestions([]); 481 481 + return; 482 482 + } 483 483 + 484 484 + if (scope.type === "publication") { 485 485 + // Search within the publication's documents 486 486 + const documents = await callRPC(`search_publication_documents`, { 487 487 + publication_uri: scope.uri, 488 488 + query: query || "", 489 489 + limit: 10, 490 490 + }); 491 491 + setSuggestions( 492 492 + documents.result.documents.map((d) => ({ 493 493 + type: "post" as const, 494 494 + uri: d.uri, 495 495 + title: d.title, 496 496 + url: d.url, 497 497 + })), 498 498 + ); 499 499 + } else { 500 500 + // Default scope: search people and publications 501 501 + const agent = new Agent("https://public.api.bsky.app"); 502 502 + const [result, publications] = await Promise.all([ 503 503 + agent.searchActorsTypeahead({ 504 504 + q: query || "", 505 505 + limit: 8, 506 506 + }), 507 507 + callRPC(`search_publication_names`, { query: query || "", limit: 8 }), 508 508 + ]); 509 509 + setSuggestions([ 510 510 + ...result.data.actors.map((actor) => ({ 511 511 + type: "did" as const, 512 512 + handle: actor.handle, 513 513 + did: actor.did, 514 514 + displayName: actor.displayName, 515 515 + avatar: actor.avatar, 516 516 + })), 517 517 + ...publications.result.publications.map((p) => ({ 518 518 + type: "publication" as const, 519 519 + uri: p.uri, 520 520 + name: p.name, 521 521 + url: p.url, 522 522 + })), 523 523 + ]); 524 524 + } 525 525 + }, 526 526 + 300, 527 527 + [query, scope], 528 528 + ); 529 529 + 530 530 + useEffect(() => { 531 531 + if (suggestionIndex > suggestions.length - 1) { 532 532 + setSuggestionIndex(Math.max(0, suggestions.length - 1)); 533 533 + } 534 534 + }, [suggestionIndex, suggestions.length]); 535 535 + 536 536 + return { 537 537 + suggestions, 538 538 + suggestionIndex, 539 539 + setSuggestionIndex, 540 540 + scope, 541 541 + setScope: setScopeAndClear, 542 542 + }; 543 543 + }

+52 -6

components/PageSWRDataProvider.tsx

··· 7 7 import { getPollData } from "actions/pollActions"; 8 8 import type { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; 9 9 import { createContext, useContext } from "react"; 10 10 + import { getPublicationMetadataFromLeafletData } from "src/utils/getPublicationMetadataFromLeafletData"; 11 11 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 12 12 + import { AtUri } from "@atproto/syntax"; 10 13 11 14 export const StaticLeafletDataContext = createContext< 12 15 null | GetLeafletDataReturnType["result"]["data"] ··· 66 69 }; 67 70 export function useLeafletPublicationData() { 68 71 let { data, mutate } = useLeafletData(); 72 72 + 73 73 + // First check for leaflets in publications 74 74 + let pubData = getPublicationMetadataFromLeafletData(data); 75 75 + 69 76 return { 70 70 - data: 71 71 - data?.leaflets_in_publications?.[0] || 72 72 - data?.permission_token_rights[0].entity_sets?.permission_tokens?.find( 73 73 - (p) => p.leaflets_in_publications.length, 74 74 - )?.leaflets_in_publications?.[0] || 75 75 - null, 77 77 + data: pubData || null, 76 78 mutate, 77 79 }; 78 80 } ··· 80 82 let { data, mutate } = useLeafletData(); 81 83 return { data: data?.custom_domain_routes, mutate: mutate }; 82 84 } 85 85 + 86 86 + export function useLeafletPublicationStatus() { 87 87 + const data = useContext(StaticLeafletDataContext); 88 88 + if (!data) return null; 89 89 + 90 90 + const publishedInPublication = data.leaflets_in_publications?.find( 91 91 + (l) => l.doc, 92 92 + ); 93 93 + const publishedStandalone = data.leaflets_to_documents?.find( 94 94 + (l) => !!l.documents, 95 95 + ); 96 96 + 97 97 + const documentUri = 98 98 + publishedInPublication?.documents?.uri ?? publishedStandalone?.document; 99 99 + 100 100 + // Compute the full post URL for sharing 101 101 + let postShareLink: string | undefined; 102 102 + if (publishedInPublication?.publications && publishedInPublication.documents) { 103 103 + // Published in a publication - use publication URL + document rkey 104 104 + const docUri = new AtUri(publishedInPublication.documents.uri); 105 105 + postShareLink = `${getPublicationURL(publishedInPublication.publications)}/${docUri.rkey}`; 106 106 + } else if (publishedStandalone?.document) { 107 107 + // Standalone published post - use /p/{did}/{rkey} format 108 108 + const docUri = new AtUri(publishedStandalone.document); 109 109 + postShareLink = `/p/${docUri.host}/${docUri.rkey}`; 110 110 + } 111 111 + 112 112 + return { 113 113 + token: data, 114 114 + leafletId: data.root_entity, 115 115 + shareLink: data.id, 116 116 + // Draft state - in a publication but not yet published 117 117 + draftInPublication: 118 118 + data.leaflets_in_publications?.[0]?.publication ?? undefined, 119 119 + // Published state 120 120 + isPublished: !!(publishedInPublication || publishedStandalone), 121 121 + publishedAt: 122 122 + publishedInPublication?.documents?.indexed_at ?? 123 123 + publishedStandalone?.documents?.indexed_at, 124 124 + documentUri, 125 125 + // Full URL for sharing published posts 126 126 + postShareLink, 127 127 + }; 128 128 + }

+5 -2

components/Pages/Page.tsx

··· 12 12 import { Blocks } from "components/Blocks"; 13 13 import { PublicationMetadata } from "./PublicationMetadata"; 14 14 import { useCardBorderHidden } from "./useCardBorderHidden"; 15 15 - import { focusPage } from "."; 15 15 + import { focusPage } from "src/utils/focusPage"; 16 16 import { PageOptions } from "./PageOptions"; 17 17 import { CardThemeProvider } from "components/ThemeManager/ThemeProvider"; 18 18 import { useDrawerOpen } from "app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer"; 19 19 + import { usePreserveScroll } from "src/hooks/usePreserveScroll"; 19 20 20 21 export function Page(props: { 21 22 entityID: string; ··· 60 61 /> 61 62 } 62 63 > 63 63 - {props.first && ( 64 64 + {props.first && pageType === "doc" && ( 64 65 <> 65 66 <PublicationMetadata /> 66 67 </> ··· 83 84 pageType: "canvas" | "doc"; 84 85 drawerOpen: boolean | undefined; 85 86 }) => { 87 87 + let { ref } = usePreserveScroll<HTMLDivElement>(props.id); 86 88 return ( 87 89 // this div wraps the contents AND the page options. 88 90 // it needs to be its own div because this container does NOT scroll, and therefore doesn't clip the absolutely positioned pageOptions ··· 95 97 it needs to be a separate div so that the user can scroll from anywhere on the page if there isn't a card border 96 98 */} 97 99 <div 100 100 + ref={ref} 98 101 onClick={props.onClickAction} 99 102 id={props.id} 100 103 className={`

+5 -2

components/Pages/PageShareMenu.tsx

··· 1 1 import { useLeafletDomains } from "components/PageSWRDataProvider"; 2 2 - import { ShareButton, usePublishLink } from "components/ShareOptions"; 2 2 + import { 3 3 + ShareButton, 4 4 + useReadOnlyShareLink, 5 5 + } from "app/[leaflet_id]/actions/ShareOptions"; 3 6 import { useEffect, useState } from "react"; 4 7 5 8 export const PageShareMenu = (props: { entityID: string }) => { 6 6 - let publishLink = usePublishLink(); 9 9 + let publishLink = useReadOnlyShareLink(); 7 10 let { data: domains } = useLeafletDomains(); 8 11 let [collabLink, setCollabLink] = useState<null | string>(null); 9 12 useEffect(() => {

+158 -80

components/Pages/PublicationMetadata.tsx

··· 1 1 import Link from "next/link"; 2 2 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 3 3 - import { useRef } from "react"; 3 3 + import { useRef, useState } from "react"; 4 4 import { useReplicache } from "src/replicache"; 5 5 import { AsyncValueAutosizeTextarea } from "components/utils/AutosizeTextarea"; 6 6 import { Separator } from "components/Layout"; 7 7 import { AtUri } from "@atproto/syntax"; 8 8 - import { PubLeafletDocument } from "lexicons/api"; 8 8 + import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 9 9 import { 10 10 getBasePublicationURL, 11 11 getPublicationURL, ··· 13 13 import { useSubscribe } from "src/replicache/useSubscribe"; 14 14 import { useEntitySetContext } from "components/EntitySetProvider"; 15 15 import { timeAgo } from "src/utils/timeAgo"; 16 16 + import { CommentTiny } from "components/Icons/CommentTiny"; 17 17 + import { QuoteTiny } from "components/Icons/QuoteTiny"; 18 18 + import { TagTiny } from "components/Icons/TagTiny"; 19 19 + import { Popover } from "components/Popover"; 20 20 + import { TagSelector } from "components/Tags"; 16 21 import { useIdentityData } from "components/IdentityProvider"; 22 22 + import { PostHeaderLayout } from "app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader"; 17 23 export const PublicationMetadata = () => { 18 24 let { rep } = useReplicache(); 19 25 let { data: pub } = useLeafletPublicationData(); ··· 23 29 tx.get<string>("publication_description"), 24 30 ); 25 31 let record = pub?.documents?.data as PubLeafletDocument.Record | null; 32 32 + let pubRecord = pub?.publications?.record as 33 33 + | PubLeafletPublication.Record 34 34 + | undefined; 26 35 let publishedAt = record?.publishedAt; 27 36 28 28 - if (!pub || !pub.publications) return null; 37 37 + if (!pub) return null; 29 38 30 39 if (typeof title !== "string") { 31 40 title = pub?.title || ""; ··· 33 42 if (typeof description !== "string") { 34 43 description = pub?.description || ""; 35 44 } 45 45 + let tags = true; 46 46 + 36 47 return ( 37 37 - <div className={`flex flex-col px-3 sm:px-4 pb-5 sm:pt-3 pt-2`}> 38 38 - <div className="flex gap-2"> 39 39 - <Link 40 40 - href={ 41 41 - identity?.atp_did === pub.publications?.identity_did 42 42 - ? `${getBasePublicationURL(pub.publications)}/dashboard` 43 43 - : getPublicationURL(pub.publications) 44 44 - } 45 45 - className="leafletMetadata text-accent-contrast font-bold hover:no-underline" 46 46 - > 47 47 - {pub.publications?.name} 48 48 - </Link> 49 49 - <div className="font-bold text-tertiary px-1 text-sm flex place-items-center bg-border-light rounded-md "> 50 50 - Editor 48 48 + <PostHeaderLayout 49 49 + pubLink={ 50 50 + <div className="flex gap-2 items-center"> 51 51 + {pub.publications && ( 52 52 + <Link 53 53 + href={ 54 54 + identity?.atp_did === pub.publications?.identity_did 55 55 + ? `${getBasePublicationURL(pub.publications)}/dashboard` 56 56 + : getPublicationURL(pub.publications) 57 57 + } 58 58 + className="leafletMetadata text-accent-contrast font-bold hover:no-underline" 59 59 + > 60 60 + {pub.publications?.name} 61 61 + </Link> 62 62 + )} 63 63 + <div className="font-bold text-tertiary px-1 h-[20px] text-sm flex place-items-center bg-border-light rounded-md "> 64 64 + DRAFT 65 65 + </div> 51 66 </div> 52 52 - </div> 53 53 - <TextField 54 54 - className="text-xl font-bold outline-hidden bg-transparent" 55 55 - value={title} 56 56 - onChange={async (newTitle) => { 57 57 - await rep?.mutate.updatePublicationDraft({ 58 58 - title: newTitle, 59 59 - description, 60 60 - }); 61 61 - }} 62 62 - placeholder="Untitled" 63 63 - /> 64 64 - <TextField 65 65 - placeholder="add an optional description..." 66 66 - className="italic text-secondary outline-hidden bg-transparent" 67 67 - value={description} 68 68 - onChange={async (newDescription) => { 69 69 - await rep?.mutate.updatePublicationDraft({ 70 70 - title, 71 71 - description: newDescription, 72 72 - }); 73 73 - }} 74 74 - /> 75 75 - {pub.doc ? ( 76 76 - <div className="flex flex-row items-center gap-2 pt-3"> 77 77 - <p className="text-sm text-tertiary"> 78 78 - Published {publishedAt && timeAgo(publishedAt)} 79 79 - </p> 80 80 - <Separator classname="h-4" /> 81 81 - <Link 82 82 - target="_blank" 83 83 - className="text-sm" 84 84 - href={`${getPublicationURL(pub.publications)}/${new AtUri(pub.doc).rkey}`} 85 85 - > 86 86 - View Post 87 87 - </Link> 88 88 - </div> 89 89 - ) : ( 90 90 - <p className="text-sm text-tertiary pt-2">Draft</p> 91 91 - )} 92 92 - </div> 67 67 + } 68 68 + postTitle={ 69 69 + <TextField 70 70 + className="leading-tight pt-0.5 text-xl font-bold outline-hidden bg-transparent" 71 71 + value={title} 72 72 + onChange={async (newTitle) => { 73 73 + await rep?.mutate.updatePublicationDraft({ 74 74 + title: newTitle, 75 75 + description, 76 76 + }); 77 77 + }} 78 78 + placeholder="Untitled" 79 79 + /> 80 80 + } 81 81 + postDescription={ 82 82 + <TextField 83 83 + placeholder="add an optional description..." 84 84 + className="pt-1 italic text-secondary outline-hidden bg-transparent" 85 85 + value={description} 86 86 + onChange={async (newDescription) => { 87 87 + await rep?.mutate.updatePublicationDraft({ 88 88 + title, 89 89 + description: newDescription, 90 90 + }); 91 91 + }} 92 92 + /> 93 93 + } 94 94 + postInfo={ 95 95 + <> 96 96 + {pub.doc ? ( 97 97 + <div className="flex gap-2 items-center"> 98 98 + <p className="text-sm text-tertiary"> 99 99 + Published {publishedAt && timeAgo(publishedAt)} 100 100 + </p> 101 101 + 102 102 + <Link 103 103 + target="_blank" 104 104 + className="text-sm" 105 105 + href={ 106 106 + pub.publications 107 107 + ? `${getPublicationURL(pub.publications)}/${new AtUri(pub.doc).rkey}` 108 108 + : `/p/${new AtUri(pub.doc).host}/${new AtUri(pub.doc).rkey}` 109 109 + } 110 110 + > 111 111 + View 112 112 + </Link> 113 113 + </div> 114 114 + ) : ( 115 115 + <p>Draft</p> 116 116 + )} 117 117 + <div className="flex gap-2 text-border items-center"> 118 118 + {tags && ( 119 119 + <> 120 120 + <AddTags /> 121 121 + <Separator classname="h-4!" /> 122 122 + </> 123 123 + )} 124 124 + <div className="flex gap-1 items-center"> 125 125 + <QuoteTiny />— 126 126 + </div> 127 127 + {pubRecord?.preferences?.showComments && ( 128 128 + <div className="flex gap-1 items-center"> 129 129 + <CommentTiny />— 130 130 + </div> 131 131 + )} 132 132 + </div> 133 133 + </> 134 134 + } 135 135 + /> 93 136 ); 94 137 }; 95 138 ··· 169 212 let record = pub?.documents?.data as PubLeafletDocument.Record | null; 170 213 let publishedAt = record?.publishedAt; 171 214 172 172 - if (!pub || !pub.publications) return null; 215 215 + if (!pub) return null; 173 216 174 217 return ( 175 175 - <div className={`flex flex-col px-3 sm:px-4 pb-5 sm:pt-3 pt-2`}> 176 176 - <div className="text-accent-contrast font-bold hover:no-underline"> 177 177 - {pub.publications?.name} 178 178 - </div> 218 218 + <PostHeaderLayout 219 219 + pubLink={ 220 220 + <div className="text-accent-contrast font-bold hover:no-underline"> 221 221 + {pub.publications?.name} 222 222 + </div> 223 223 + } 224 224 + postTitle={pub.title} 225 225 + postDescription={pub.description} 226 226 + postInfo={ 227 227 + pub.doc ? ( 228 228 + <p>Published {publishedAt && timeAgo(publishedAt)}</p> 229 229 + ) : ( 230 230 + <p>Draft</p> 231 231 + ) 232 232 + } 233 233 + /> 234 234 + ); 235 235 + }; 236 236 + 237 237 + const AddTags = () => { 238 238 + let { data: pub } = useLeafletPublicationData(); 239 239 + let { rep } = useReplicache(); 240 240 + let record = pub?.documents?.data as PubLeafletDocument.Record | null; 241 241 + 242 242 + // Get tags from Replicache local state or published document 243 243 + let replicacheTags = useSubscribe(rep, (tx) => 244 244 + tx.get<string[]>("publication_tags"), 245 245 + ); 179 246 180 180 - <div 181 181 - className={`text-xl font-bold outline-hidden bg-transparent ${!pub.title && "text-tertiary italic"}`} 182 182 - > 183 183 - {pub.title ? pub.title : "Untitled"} 184 184 - </div> 185 185 - <div className="italic text-secondary outline-hidden bg-transparent"> 186 186 - {pub.description} 187 187 - </div> 247 247 + // Determine which tags to use - prioritize Replicache state 248 248 + let tags: string[] = []; 249 249 + if (Array.isArray(replicacheTags)) { 250 250 + tags = replicacheTags; 251 251 + } else if (record?.tags && Array.isArray(record.tags)) { 252 252 + tags = record.tags as string[]; 253 253 + } 254 254 + 255 255 + // Update tags in replicache local state 256 256 + const handleTagsChange = async (newTags: string[]) => { 257 257 + // Store tags in replicache for next publish/update 258 258 + await rep?.mutate.updatePublicationDraft({ 259 259 + tags: newTags, 260 260 + }); 261 261 + }; 188 262 189 189 - {pub.doc ? ( 190 190 - <div className="flex flex-row items-center gap-2 pt-3"> 191 191 - <p className="text-sm text-tertiary"> 192 192 - Published {publishedAt && timeAgo(publishedAt)} 193 193 - </p> 263 263 + return ( 264 264 + <Popover 265 265 + className="p-2! w-full min-w-xs" 266 266 + trigger={ 267 267 + <div className="addTagTrigger flex gap-1 hover:underline text-sm items-center text-tertiary"> 268 268 + <TagTiny />{" "} 269 269 + {tags.length > 0 270 270 + ? `${tags.length} Tag${tags.length === 1 ? "" : "s"}` 271 271 + : "Add Tags"} 194 272 </div> 195 195 - ) : ( 196 196 - <p className="text-sm text-tertiary pt-2">Draft</p> 197 197 - )} 198 198 - </div> 273 273 + } 274 274 + > 275 275 + <TagSelector selectedTags={tags} setSelectedTags={handleTagsChange} /> 276 276 + </Popover> 199 277 ); 200 278 };

+2 -75

components/Pages/index.tsx

··· 4 4 import { useUIState } from "src/useUIState"; 5 5 import { useSearchParams } from "next/navigation"; 6 6 7 7 - import { focusBlock } from "src/utils/focusBlock"; 8 8 - import { elementId } from "src/utils/elementId"; 7 7 + import { useEntity } from "src/replicache"; 9 8 10 10 - import { Replicache } from "replicache"; 11 11 - import { Fact, ReplicacheMutators, useEntity } from "src/replicache"; 12 12 - 13 13 - import { scanIndex } from "src/replicache/utils"; 14 14 - import { CardThemeProvider } from "../ThemeManager/ThemeProvider"; 15 15 - import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 16 9 import { useCardBorderHidden } from "./useCardBorderHidden"; 17 10 import { BookendSpacer, SandwichSpacer } from "components/LeafletLayout"; 18 11 import { LeafletSidebar } from "app/[leaflet_id]/Sidebar"; ··· 62 55 ); 63 56 } 64 57 65 65 - export async function focusPage( 66 66 - pageID: string, 67 67 - rep: Replicache<ReplicacheMutators>, 68 68 - focusFirstBlock?: "focusFirstBlock", 69 69 - ) { 70 70 - // if this page is already focused, 71 71 - let focusedBlock = useUIState.getState().focusedEntity; 72 72 - // else set this page as focused 73 73 - useUIState.setState(() => ({ 74 74 - focusedEntity: { 75 75 - entityType: "page", 76 76 - entityID: pageID, 77 77 - }, 78 78 - })); 79 79 - 80 80 - setTimeout(async () => { 81 81 - //scroll to page 82 82 - 83 83 - scrollIntoViewIfNeeded( 84 84 - document.getElementById(elementId.page(pageID).container), 85 85 - false, 86 86 - "smooth", 87 87 - ); 88 88 - 89 89 - // if we asked that the function focus the first block, focus the first block 90 90 - if (focusFirstBlock === "focusFirstBlock") { 91 91 - let firstBlock = await rep.query(async (tx) => { 92 92 - let type = await scanIndex(tx).eav(pageID, "page/type"); 93 93 - let blocks = await scanIndex(tx).eav( 94 94 - pageID, 95 95 - type[0]?.data.value === "canvas" ? "canvas/block" : "card/block", 96 96 - ); 97 97 - 98 98 - let firstBlock = blocks[0]; 99 99 - 100 100 - if (!firstBlock) { 101 101 - return null; 102 102 - } 103 103 - 104 104 - let blockType = ( 105 105 - await tx 106 106 - .scan< 107 107 - Fact<"block/type"> 108 108 - >({ indexName: "eav", prefix: `${firstBlock.data.value}-block/type` }) 109 109 - .toArray() 110 110 - )[0]; 111 111 - 112 112 - if (!blockType) return null; 113 113 - 114 114 - return { 115 115 - value: firstBlock.data.value, 116 116 - type: blockType.data.value, 117 117 - parent: firstBlock.entity, 118 118 - position: firstBlock.data.position, 119 119 - }; 120 120 - }); 121 121 - 122 122 - if (firstBlock) { 123 123 - setTimeout(() => { 124 124 - focusBlock(firstBlock, { type: "start" }); 125 125 - }, 500); 126 126 - } 127 127 - } 128 128 - }, 50); 129 129 - } 130 130 - 131 131 - export const blurPage = () => { 58 58 + const blurPage = () => { 132 59 useUIState.setState(() => ({ 133 60 focusedEntity: null, 134 61 selectedBlocks: [],

+3

components/Popover/PopoverContext.ts

··· 1 1 + import { createContext } from "react"; 2 2 + 3 3 + export const PopoverOpenContext = createContext(false);

+87

components/Popover/index.tsx

··· 1 1 + "use client"; 2 2 + import * as RadixPopover from "@radix-ui/react-popover"; 3 3 + import { theme } from "tailwind.config"; 4 4 + import { NestedCardThemeProvider } from "../ThemeManager/ThemeProvider"; 5 5 + import { useEffect, useState } from "react"; 6 6 + import { PopoverArrow } from "../Icons/PopoverArrow"; 7 7 + import { PopoverOpenContext } from "./PopoverContext"; 8 8 + export const Popover = (props: { 9 9 + trigger: React.ReactNode; 10 10 + disabled?: boolean; 11 11 + children: React.ReactNode; 12 12 + align?: "start" | "end" | "center"; 13 13 + side?: "top" | "bottom" | "left" | "right"; 14 14 + sideOffset?: number; 15 15 + background?: string; 16 16 + border?: string; 17 17 + className?: string; 18 18 + open?: boolean; 19 19 + onOpenChange?: (open: boolean) => void; 20 20 + onOpenAutoFocus?: (e: Event) => void; 21 21 + asChild?: boolean; 22 22 + arrowFill?: string; 23 23 + noArrow?: boolean; 24 24 + }) => { 25 25 + let [open, setOpen] = useState(props.open || false); 26 26 + useEffect(() => { 27 27 + if (props.open !== undefined) setOpen(props.open); 28 28 + }, [props.open]); 29 29 + return ( 30 30 + <RadixPopover.Root 31 31 + open={props.open} 32 32 + onOpenChange={(o) => { 33 33 + setOpen(o); 34 34 + props.onOpenChange?.(o); 35 35 + }} 36 36 + > 37 37 + <PopoverOpenContext value={open}> 38 38 + <RadixPopover.Trigger disabled={props.disabled} asChild={props.asChild}> 39 39 + {props.trigger} 40 40 + </RadixPopover.Trigger> 41 41 + <RadixPopover.Portal> 42 42 + <NestedCardThemeProvider> 43 43 + <RadixPopover.Content 44 44 + className={` 45 45 + z-20 bg-bg-page 46 46 + px-3 py-2 47 47 + max-w-(--radix-popover-content-available-width) 48 48 + max-h-(--radix-popover-content-available-height) 49 49 + border border-border rounded-md shadow-md 50 50 + overflow-y-scroll 51 51 + ${props.className} 52 52 + `} 53 53 + side={props.side} 54 54 + align={props.align ? props.align : "center"} 55 55 + sideOffset={props.sideOffset ? props.sideOffset : 4} 56 56 + collisionPadding={16} 57 57 + onOpenAutoFocus={props.onOpenAutoFocus} 58 58 + > 59 59 + {props.children} 60 60 + {!props.noArrow && ( 61 61 + <RadixPopover.Arrow 62 62 + asChild 63 63 + width={16} 64 64 + height={8} 65 65 + viewBox="0 0 16 8" 66 66 + > 67 67 + <PopoverArrow 68 68 + arrowFill={ 69 69 + props.arrowFill 70 70 + ? props.arrowFill 71 71 + : props.background 72 72 + ? props.background 73 73 + : theme.colors["bg-page"] 74 74 + } 75 75 + arrowStroke={ 76 76 + props.border ? props.border : theme.colors["border"] 77 77 + } 78 78 + /> 79 79 + </RadixPopover.Arrow> 80 80 + )} 81 81 + </RadixPopover.Content> 82 82 + </NestedCardThemeProvider> 83 83 + </RadixPopover.Portal> 84 84 + </PopoverOpenContext> 85 85 + </RadixPopover.Root> 86 86 + ); 87 87 + };

-84

components/Popover.tsx

··· 1 1 - "use client"; 2 2 - import * as RadixPopover from "@radix-ui/react-popover"; 3 3 - import { theme } from "tailwind.config"; 4 4 - import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider"; 5 5 - import { createContext, useEffect, useState } from "react"; 6 6 - import { PopoverArrow } from "./Icons/PopoverArrow"; 7 7 - 8 8 - export const PopoverOpenContext = createContext(false); 9 9 - export const Popover = (props: { 10 10 - trigger: React.ReactNode; 11 11 - disabled?: boolean; 12 12 - children: React.ReactNode; 13 13 - align?: "start" | "end" | "center"; 14 14 - side?: "top" | "bottom" | "left" | "right"; 15 15 - background?: string; 16 16 - border?: string; 17 17 - className?: string; 18 18 - open?: boolean; 19 19 - onOpenChange?: (open: boolean) => void; 20 20 - onOpenAutoFocus?: (e: Event) => void; 21 21 - asChild?: boolean; 22 22 - arrowFill?: string; 23 23 - }) => { 24 24 - let [open, setOpen] = useState(props.open || false); 25 25 - useEffect(() => { 26 26 - if (props.open !== undefined) setOpen(props.open); 27 27 - }, [props.open]); 28 28 - return ( 29 29 - <RadixPopover.Root 30 30 - open={props.open} 31 31 - onOpenChange={(o) => { 32 32 - setOpen(o); 33 33 - props.onOpenChange?.(o); 34 34 - }} 35 35 - > 36 36 - <PopoverOpenContext value={open}> 37 37 - <RadixPopover.Trigger disabled={props.disabled} asChild={props.asChild}> 38 38 - {props.trigger} 39 39 - </RadixPopover.Trigger> 40 40 - <RadixPopover.Portal> 41 41 - <NestedCardThemeProvider> 42 42 - <RadixPopover.Content 43 43 - className={` 44 44 - z-20 bg-bg-page 45 45 - px-3 py-2 46 46 - max-w-(--radix-popover-content-available-width) 47 47 - max-h-(--radix-popover-content-available-height) 48 48 - border border-border rounded-md shadow-md 49 49 - overflow-y-scroll 50 50 - ${props.className} 51 51 - `} 52 52 - side={props.side} 53 53 - align={props.align ? props.align : "center"} 54 54 - sideOffset={4} 55 55 - collisionPadding={16} 56 56 - onOpenAutoFocus={props.onOpenAutoFocus} 57 57 - > 58 58 - {props.children} 59 59 - <RadixPopover.Arrow 60 60 - asChild 61 61 - width={16} 62 62 - height={8} 63 63 - viewBox="0 0 16 8" 64 64 - > 65 65 - <PopoverArrow 66 66 - arrowFill={ 67 67 - props.arrowFill 68 68 - ? props.arrowFill 69 69 - : props.background 70 70 - ? props.background 71 71 - : theme.colors["bg-page"] 72 72 - } 73 73 - arrowStroke={ 74 74 - props.border ? props.border : theme.colors["border"] 75 75 - } 76 76 - /> 77 77 - </RadixPopover.Arrow> 78 78 - </RadixPopover.Content> 79 79 - </NestedCardThemeProvider> 80 80 - </RadixPopover.Portal> 81 81 - </PopoverOpenContext> 82 82 - </RadixPopover.Root> 83 83 - ); 84 84 - };

+132

components/PostListing.tsx

··· 1 1 + "use client"; 2 2 + import { AtUri } from "@atproto/api"; 3 3 + import { PubIcon } from "components/ActionBar/Publications"; 4 4 + import { CommentTiny } from "components/Icons/CommentTiny"; 5 5 + import { QuoteTiny } from "components/Icons/QuoteTiny"; 6 6 + import { Separator } from "components/Layout"; 7 7 + import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider"; 8 8 + import { BaseThemeProvider } from "components/ThemeManager/ThemeProvider"; 9 9 + import { useSmoker } from "components/Toast"; 10 10 + import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 11 11 + import { blobRefToSrc } from "src/utils/blobRefToSrc"; 12 12 + import type { Post } from "app/(home-pages)/reader/getReaderFeed"; 13 13 + 14 14 + import Link from "next/link"; 15 15 + import { InteractionPreview } from "./InteractionsPreview"; 16 16 + 17 17 + export const PostListing = (props: Post) => { 18 18 + let pubRecord = props.publication.pubRecord as PubLeafletPublication.Record; 19 19 + 20 20 + let postRecord = props.documents.data as PubLeafletDocument.Record; 21 21 + let postUri = new AtUri(props.documents.uri); 22 22 + 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; 30 30 + 31 31 + let backgroundImageRepeat = pubRecord?.theme?.backgroundImage?.repeat; 32 32 + let backgroundImageSize = pubRecord?.theme?.backgroundImage?.width || 500; 33 33 + 34 34 + let showPageBackground = pubRecord.theme?.showPageBackground; 35 35 + 36 36 + let quotes = props.documents.document_mentions_in_bsky?.[0]?.count || 0; 37 37 + let comments = 38 38 + pubRecord.preferences?.showComments === false 39 39 + ? 0 40 40 + : props.documents.comments_on_documents?.[0]?.count || 0; 41 41 + let tags = (postRecord?.tags as string[] | undefined) || []; 42 42 + 43 43 + return ( 44 44 + <BaseThemeProvider {...theme} local> 45 45 + <div 46 46 + style={{ 47 47 + backgroundImage: `url(${backgroundImage})`, 48 48 + backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", 49 49 + backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`, 50 50 + }} 51 51 + className={`no-underline! flex flex-row gap-2 w-full relative 52 52 + bg-bg-leaflet 53 53 + border border-border-light rounded-lg 54 54 + sm:p-2 p-2 selected-outline 55 55 + hover:outline-accent-contrast hover:border-accent-contrast 56 56 + `} 57 57 + > 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 + /> 62 62 + <div 63 63 + className={`${showPageBackground ? "bg-bg-page " : "bg-transparent"} rounded-md w-full px-[10px] pt-2 pb-2`} 64 64 + style={{ 65 65 + backgroundColor: showPageBackground 66 66 + ? "rgba(var(--bg-page), var(--bg-page-alpha))" 67 67 + : "transparent", 68 68 + }} 69 69 + > 70 70 + <h3 className="text-primary truncate">{postRecord.title}</h3> 71 71 + 72 72 + <p className="text-secondary italic">{postRecord.description}</p> 73 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"> 74 74 + <PubInfo 75 75 + href={props.publication.href} 76 76 + pubRecord={pubRecord} 77 77 + uri={props.publication.uri} 78 78 + /> 79 79 + <div className="flex flex-row justify-between gap-2 items-center w-full"> 80 80 + <PostInfo publishedAt={postRecord.publishedAt} /> 81 81 + <InteractionPreview 82 82 + postUrl={`${props.publication.href}/${postUri.rkey}`} 83 83 + quotesCount={quotes} 84 84 + commentsCount={comments} 85 85 + tags={tags} 86 86 + showComments={pubRecord.preferences?.showComments} 87 87 + share 88 88 + /> 89 89 + </div> 90 90 + </div> 91 91 + </div> 92 92 + </div> 93 93 + </BaseThemeProvider> 94 94 + ); 95 95 + }; 96 96 + 97 97 + const PubInfo = (props: { 98 98 + href: string; 99 99 + pubRecord: PubLeafletPublication.Record; 100 100 + uri: string; 101 101 + }) => { 102 102 + return ( 103 103 + <div className="flex flex-col md:w-auto shrink-0 w-full"> 104 104 + <hr className="md:hidden block border-border-light mb-2" /> 105 105 + <Link 106 106 + href={props.href} 107 107 + className="text-accent-contrast font-bold no-underline text-sm flex gap-1 items-center md:w-fit relative shrink-0" 108 108 + > 109 109 + <PubIcon small record={props.pubRecord} uri={props.uri} /> 110 110 + {props.pubRecord.name} 111 111 + </Link> 112 112 + </div> 113 113 + ); 114 114 + }; 115 115 + 116 116 + const PostInfo = (props: { publishedAt: string | undefined }) => { 117 117 + return ( 118 118 + <div className="flex gap-2 items-center shrink-0 self-start"> 119 119 + {props.publishedAt && ( 120 120 + <> 121 121 + <div className="shrink-0"> 122 122 + {new Date(props.publishedAt).toLocaleDateString("en-US", { 123 123 + year: "numeric", 124 124 + month: "short", 125 125 + day: "numeric", 126 126 + })} 127 127 + </div> 128 128 + </> 129 129 + )} 130 130 + </div> 131 131 + ); 132 132 + };

+717

components/SelectionManager/index.tsx

··· 1 1 + "use client"; 2 2 + import { useEffect, useRef, useState } from "react"; 3 3 + import { useReplicache } from "src/replicache"; 4 4 + import { useUIState } from "src/useUIState"; 5 5 + import { scanIndex } from "src/replicache/utils"; 6 6 + import { focusBlock } from "src/utils/focusBlock"; 7 7 + import { useEditorStates } from "src/state/useEditorState"; 8 8 + import { useEntitySetContext } from "../EntitySetProvider"; 9 9 + import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 10 10 + import { indent, outdent, outdentFull } from "src/utils/list-operations"; 11 11 + import { addShortcut, Shortcut } from "src/shortcuts"; 12 12 + import { elementId } from "src/utils/elementId"; 13 13 + import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 14 14 + import { copySelection } from "src/utils/copySelection"; 15 15 + import { useIsMobile } from "src/hooks/isMobile"; 16 16 + import { deleteBlock } from "src/utils/deleteBlock"; 17 17 + import { schema } from "../Blocks/TextBlock/schema"; 18 18 + import { MarkType } from "prosemirror-model"; 19 19 + import { useSelectingMouse, getSortedSelection } from "./selectionState"; 20 20 + 21 21 + //How should I model selection? As ranges w/ a start and end? Store *blocks* so that I can just construct ranges? 22 22 + // How does this relate to *when dragging* ? 23 23 + 24 24 + export function SelectionManager() { 25 25 + let moreThanOneSelected = useUIState((s) => s.selectedBlocks.length > 1); 26 26 + let entity_set = useEntitySetContext(); 27 27 + let { rep, undoManager } = useReplicache(); 28 28 + let isMobile = useIsMobile(); 29 29 + useEffect(() => { 30 30 + if (!entity_set.permissions.write || !rep) return; 31 31 + const getSortedSelectionBound = getSortedSelection.bind(null, rep); 32 32 + let shortcuts: Shortcut[] = [ 33 33 + { 34 34 + metaKey: true, 35 35 + key: "ArrowUp", 36 36 + handler: async () => { 37 37 + let [firstBlock] = 38 38 + (await rep?.query((tx) => 39 39 + getBlocksWithType( 40 40 + tx, 41 41 + useUIState.getState().selectedBlocks[0].parent, 42 42 + ), 43 43 + )) || []; 44 44 + if (firstBlock) focusBlock(firstBlock, { type: "start" }); 45 45 + }, 46 46 + }, 47 47 + { 48 48 + metaKey: true, 49 49 + key: "ArrowDown", 50 50 + handler: async () => { 51 51 + let blocks = 52 52 + (await rep?.query((tx) => 53 53 + getBlocksWithType( 54 54 + tx, 55 55 + useUIState.getState().selectedBlocks[0].parent, 56 56 + ), 57 57 + )) || []; 58 58 + let folded = useUIState.getState().foldedBlocks; 59 59 + blocks = blocks.filter( 60 60 + (f) => 61 61 + !f.listData || 62 62 + !f.listData.path.find( 63 63 + (path) => 64 64 + folded.includes(path.entity) && f.value !== path.entity, 65 65 + ), 66 66 + ); 67 67 + let lastBlock = blocks[blocks.length - 1]; 68 68 + if (lastBlock) focusBlock(lastBlock, { type: "end" }); 69 69 + }, 70 70 + }, 71 71 + { 72 72 + metaKey: true, 73 73 + altKey: true, 74 74 + key: ["l", "¬"], 75 75 + handler: async () => { 76 76 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 77 77 + for (let block of sortedBlocks) { 78 78 + if (!block.listData) { 79 79 + await rep?.mutate.assertFact({ 80 80 + entity: block.value, 81 81 + attribute: "block/is-list", 82 82 + data: { type: "boolean", value: true }, 83 83 + }); 84 84 + } else { 85 85 + outdentFull(block, rep); 86 86 + } 87 87 + } 88 88 + }, 89 89 + }, 90 90 + { 91 91 + metaKey: true, 92 92 + shift: true, 93 93 + key: ["ArrowDown", "J"], 94 94 + handler: async () => { 95 95 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 96 96 + let block = sortedBlocks[0]; 97 97 + let nextBlock = siblings 98 98 + .slice(siblings.findIndex((s) => s.value === block.value) + 1) 99 99 + .find( 100 100 + (f) => 101 101 + f.listData && 102 102 + block.listData && 103 103 + !f.listData.path.find((f) => f.entity === block.value), 104 104 + ); 105 105 + if ( 106 106 + nextBlock?.listData && 107 107 + block.listData && 108 108 + nextBlock.listData.depth === block.listData.depth - 1 109 109 + ) { 110 110 + if (useUIState.getState().foldedBlocks.includes(nextBlock.value)) 111 111 + useUIState.getState().toggleFold(nextBlock.value); 112 112 + await rep?.mutate.moveBlock({ 113 113 + block: block.value, 114 114 + oldParent: block.listData?.parent, 115 115 + newParent: nextBlock.value, 116 116 + position: { type: "first" }, 117 117 + }); 118 118 + } else { 119 119 + await rep?.mutate.moveBlockDown({ 120 120 + entityID: block.value, 121 121 + parent: block.listData?.parent || block.parent, 122 122 + }); 123 123 + } 124 124 + }, 125 125 + }, 126 126 + { 127 127 + metaKey: true, 128 128 + shift: true, 129 129 + key: ["ArrowUp", "K"], 130 130 + handler: async () => { 131 131 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 132 132 + let block = sortedBlocks[0]; 133 133 + let previousBlock = 134 134 + siblings?.[siblings.findIndex((s) => s.value === block.value) - 1]; 135 135 + if (previousBlock.value === block.listData?.parent) { 136 136 + previousBlock = 137 137 + siblings?.[ 138 138 + siblings.findIndex((s) => s.value === block.value) - 2 139 139 + ]; 140 140 + } 141 141 + 142 142 + if ( 143 143 + previousBlock?.listData && 144 144 + block.listData && 145 145 + block.listData.depth > 1 && 146 146 + !previousBlock.listData.path.find( 147 147 + (f) => f.entity === block.listData?.parent, 148 148 + ) 149 149 + ) { 150 150 + let depth = block.listData.depth; 151 151 + let newParent = previousBlock.listData.path.find( 152 152 + (f) => f.depth === depth - 1, 153 153 + ); 154 154 + if (!newParent) return; 155 155 + if (useUIState.getState().foldedBlocks.includes(newParent.entity)) 156 156 + useUIState.getState().toggleFold(newParent.entity); 157 157 + rep?.mutate.moveBlock({ 158 158 + block: block.value, 159 159 + oldParent: block.listData?.parent, 160 160 + newParent: newParent.entity, 161 161 + position: { type: "end" }, 162 162 + }); 163 163 + } else { 164 164 + rep?.mutate.moveBlockUp({ 165 165 + entityID: block.value, 166 166 + parent: block.listData?.parent || block.parent, 167 167 + }); 168 168 + } 169 169 + }, 170 170 + }, 171 171 + 172 172 + { 173 173 + metaKey: true, 174 174 + shift: true, 175 175 + key: "Enter", 176 176 + handler: async () => { 177 177 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 178 178 + if (!sortedBlocks[0].listData) return; 179 179 + useUIState.getState().toggleFold(sortedBlocks[0].value); 180 180 + }, 181 181 + }, 182 182 + ]; 183 183 + if (moreThanOneSelected) 184 184 + shortcuts = shortcuts.concat([ 185 185 + { 186 186 + metaKey: true, 187 187 + key: "u", 188 188 + handler: async () => { 189 189 + let [sortedBlocks] = await getSortedSelectionBound(); 190 190 + toggleMarkInBlocks( 191 191 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 192 192 + schema.marks.underline, 193 193 + ); 194 194 + }, 195 195 + }, 196 196 + { 197 197 + metaKey: true, 198 198 + key: "i", 199 199 + handler: async () => { 200 200 + let [sortedBlocks] = await getSortedSelectionBound(); 201 201 + toggleMarkInBlocks( 202 202 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 203 203 + schema.marks.em, 204 204 + ); 205 205 + }, 206 206 + }, 207 207 + { 208 208 + metaKey: true, 209 209 + key: "b", 210 210 + handler: async () => { 211 211 + let [sortedBlocks] = await getSortedSelectionBound(); 212 212 + toggleMarkInBlocks( 213 213 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 214 214 + schema.marks.strong, 215 215 + ); 216 216 + }, 217 217 + }, 218 218 + { 219 219 + metaAndCtrl: true, 220 220 + key: "h", 221 221 + handler: async () => { 222 222 + let [sortedBlocks] = await getSortedSelectionBound(); 223 223 + toggleMarkInBlocks( 224 224 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 225 225 + schema.marks.highlight, 226 226 + { 227 227 + color: useUIState.getState().lastUsedHighlight, 228 228 + }, 229 229 + ); 230 230 + }, 231 231 + }, 232 232 + { 233 233 + metaAndCtrl: true, 234 234 + key: "x", 235 235 + handler: async () => { 236 236 + let [sortedBlocks] = await getSortedSelectionBound(); 237 237 + toggleMarkInBlocks( 238 238 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 239 239 + schema.marks.strikethrough, 240 240 + ); 241 241 + }, 242 242 + }, 243 243 + ]); 244 244 + let removeListener = addShortcut( 245 245 + shortcuts.map((shortcut) => ({ 246 246 + ...shortcut, 247 247 + handler: () => undoManager.withUndoGroup(() => shortcut.handler()), 248 248 + })), 249 249 + ); 250 250 + let listener = async (e: KeyboardEvent) => 251 251 + undoManager.withUndoGroup(async () => { 252 252 + //used here and in cut 253 253 + const deleteBlocks = async () => { 254 254 + if (!entity_set.permissions.write) return; 255 255 + if (moreThanOneSelected) { 256 256 + e.preventDefault(); 257 257 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 258 258 + let selectedBlocks = useUIState.getState().selectedBlocks; 259 259 + let firstBlock = sortedBlocks[0]; 260 260 + 261 261 + await rep?.mutate.removeBlock( 262 262 + selectedBlocks.map((block) => ({ blockEntity: block.value })), 263 263 + ); 264 264 + useUIState.getState().closePage(selectedBlocks.map((b) => b.value)); 265 265 + 266 266 + let nextBlock = 267 267 + siblings?.[ 268 268 + siblings.findIndex((s) => s.value === firstBlock.value) - 1 269 269 + ]; 270 270 + if (nextBlock) { 271 271 + useUIState.getState().setSelectedBlock({ 272 272 + value: nextBlock.value, 273 273 + parent: nextBlock.parent, 274 274 + }); 275 275 + let type = await rep?.query((tx) => 276 276 + scanIndex(tx).eav(nextBlock.value, "block/type"), 277 277 + ); 278 278 + if (!type?.[0]) return; 279 279 + if ( 280 280 + type[0]?.data.value === "text" || 281 281 + type[0]?.data.value === "heading" 282 282 + ) 283 283 + focusBlock( 284 284 + { 285 285 + value: nextBlock.value, 286 286 + type: "text", 287 287 + parent: nextBlock.parent, 288 288 + }, 289 289 + { type: "end" }, 290 290 + ); 291 291 + } 292 292 + } 293 293 + }; 294 294 + if (e.key === "Backspace" || e.key === "Delete") { 295 295 + deleteBlocks(); 296 296 + } 297 297 + if (e.key === "ArrowUp") { 298 298 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 299 299 + let focusedBlock = useUIState.getState().focusedEntity; 300 300 + if (!e.shiftKey && !e.ctrlKey) { 301 301 + if (e.defaultPrevented) return; 302 302 + if (sortedBlocks.length === 1) return; 303 303 + let firstBlock = sortedBlocks[0]; 304 304 + if (!firstBlock) return; 305 305 + let type = await rep?.query((tx) => 306 306 + scanIndex(tx).eav(firstBlock.value, "block/type"), 307 307 + ); 308 308 + if (!type?.[0]) return; 309 309 + useUIState.getState().setSelectedBlock(firstBlock); 310 310 + focusBlock( 311 311 + { ...firstBlock, type: type[0].data.value }, 312 312 + { type: "start" }, 313 313 + ); 314 314 + } else { 315 315 + if (e.defaultPrevented) return; 316 316 + if ( 317 317 + sortedBlocks.length <= 1 || 318 318 + !focusedBlock || 319 319 + focusedBlock.entityType === "page" 320 320 + ) 321 321 + return; 322 322 + let b = focusedBlock; 323 323 + let focusedBlockIndex = sortedBlocks.findIndex( 324 324 + (s) => s.value == b.entityID, 325 325 + ); 326 326 + if (focusedBlockIndex === 0) { 327 327 + let index = siblings.findIndex((s) => s.value === b.entityID); 328 328 + let nextSelectedBlock = siblings[index - 1]; 329 329 + if (!nextSelectedBlock) return; 330 330 + 331 331 + scrollIntoViewIfNeeded( 332 332 + document.getElementById( 333 333 + elementId.block(nextSelectedBlock.value).container, 334 334 + ), 335 335 + false, 336 336 + ); 337 337 + useUIState.getState().addBlockToSelection({ 338 338 + ...nextSelectedBlock, 339 339 + }); 340 340 + useUIState.getState().setFocusedBlock({ 341 341 + entityType: "block", 342 342 + parent: nextSelectedBlock.parent, 343 343 + entityID: nextSelectedBlock.value, 344 344 + }); 345 345 + } else { 346 346 + let nextBlock = sortedBlocks[sortedBlocks.length - 2]; 347 347 + useUIState.getState().setFocusedBlock({ 348 348 + entityType: "block", 349 349 + parent: b.parent, 350 350 + entityID: nextBlock.value, 351 351 + }); 352 352 + scrollIntoViewIfNeeded( 353 353 + document.getElementById( 354 354 + elementId.block(nextBlock.value).container, 355 355 + ), 356 356 + false, 357 357 + ); 358 358 + if (sortedBlocks.length === 2) { 359 359 + useEditorStates 360 360 + .getState() 361 361 + .editorStates[nextBlock.value]?.view?.focus(); 362 362 + } 363 363 + useUIState 364 364 + .getState() 365 365 + .removeBlockFromSelection(sortedBlocks[focusedBlockIndex]); 366 366 + } 367 367 + } 368 368 + } 369 369 + if (e.key === "ArrowLeft") { 370 370 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 371 371 + if (sortedSelection.length === 1) return; 372 372 + let firstBlock = sortedSelection[0]; 373 373 + if (!firstBlock) return; 374 374 + let type = await rep?.query((tx) => 375 375 + scanIndex(tx).eav(firstBlock.value, "block/type"), 376 376 + ); 377 377 + if (!type?.[0]) return; 378 378 + useUIState.getState().setSelectedBlock(firstBlock); 379 379 + focusBlock( 380 380 + { ...firstBlock, type: type[0].data.value }, 381 381 + { type: "start" }, 382 382 + ); 383 383 + } 384 384 + if (e.key === "ArrowRight") { 385 385 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 386 386 + if (sortedSelection.length === 1) return; 387 387 + let lastBlock = sortedSelection[sortedSelection.length - 1]; 388 388 + if (!lastBlock) return; 389 389 + let type = await rep?.query((tx) => 390 390 + scanIndex(tx).eav(lastBlock.value, "block/type"), 391 391 + ); 392 392 + if (!type?.[0]) return; 393 393 + useUIState.getState().setSelectedBlock(lastBlock); 394 394 + focusBlock( 395 395 + { ...lastBlock, type: type[0].data.value }, 396 396 + { type: "end" }, 397 397 + ); 398 398 + } 399 399 + if (e.key === "Tab") { 400 400 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 401 401 + if (sortedSelection.length <= 1) return; 402 402 + e.preventDefault(); 403 403 + if (e.shiftKey) { 404 404 + for (let i = siblings.length - 1; i >= 0; i--) { 405 405 + let block = siblings[i]; 406 406 + if (!sortedSelection.find((s) => s.value === block.value)) 407 407 + continue; 408 408 + if ( 409 409 + sortedSelection.find((s) => s.value === block.listData?.parent) 410 410 + ) 411 411 + continue; 412 412 + let parentoffset = 1; 413 413 + let previousBlock = siblings[i - parentoffset]; 414 414 + while ( 415 415 + previousBlock && 416 416 + sortedSelection.find((s) => previousBlock.value === s.value) 417 417 + ) { 418 418 + parentoffset += 1; 419 419 + previousBlock = siblings[i - parentoffset]; 420 420 + } 421 421 + if (!block.listData || !previousBlock.listData) continue; 422 422 + outdent(block, previousBlock, rep); 423 423 + } 424 424 + } else { 425 425 + for (let i = 0; i < siblings.length; i++) { 426 426 + let block = siblings[i]; 427 427 + if (!sortedSelection.find((s) => s.value === block.value)) 428 428 + continue; 429 429 + if ( 430 430 + sortedSelection.find((s) => s.value === block.listData?.parent) 431 431 + ) 432 432 + continue; 433 433 + let parentoffset = 1; 434 434 + let previousBlock = siblings[i - parentoffset]; 435 435 + while ( 436 436 + previousBlock && 437 437 + sortedSelection.find((s) => previousBlock.value === s.value) 438 438 + ) { 439 439 + parentoffset += 1; 440 440 + previousBlock = siblings[i - parentoffset]; 441 441 + } 442 442 + if (!block.listData || !previousBlock.listData) continue; 443 443 + indent(block, previousBlock, rep); 444 444 + } 445 445 + } 446 446 + } 447 447 + if (e.key === "ArrowDown") { 448 448 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 449 449 + let focusedBlock = useUIState.getState().focusedEntity; 450 450 + if (!e.shiftKey) { 451 451 + if (sortedSelection.length === 1) return; 452 452 + let lastBlock = sortedSelection[sortedSelection.length - 1]; 453 453 + if (!lastBlock) return; 454 454 + let type = await rep?.query((tx) => 455 455 + scanIndex(tx).eav(lastBlock.value, "block/type"), 456 456 + ); 457 457 + if (!type?.[0]) return; 458 458 + useUIState.getState().setSelectedBlock(lastBlock); 459 459 + focusBlock( 460 460 + { ...lastBlock, type: type[0].data.value }, 461 461 + { type: "end" }, 462 462 + ); 463 463 + } 464 464 + if (e.shiftKey) { 465 465 + if (e.defaultPrevented) return; 466 466 + if ( 467 467 + sortedSelection.length <= 1 || 468 468 + !focusedBlock || 469 469 + focusedBlock.entityType === "page" 470 470 + ) 471 471 + return; 472 472 + let b = focusedBlock; 473 473 + let focusedBlockIndex = sortedSelection.findIndex( 474 474 + (s) => s.value == b.entityID, 475 475 + ); 476 476 + if (focusedBlockIndex === sortedSelection.length - 1) { 477 477 + let index = siblings.findIndex((s) => s.value === b.entityID); 478 478 + let nextSelectedBlock = siblings[index + 1]; 479 479 + if (!nextSelectedBlock) return; 480 480 + useUIState.getState().addBlockToSelection({ 481 481 + ...nextSelectedBlock, 482 482 + }); 483 483 + 484 484 + scrollIntoViewIfNeeded( 485 485 + document.getElementById( 486 486 + elementId.block(nextSelectedBlock.value).container, 487 487 + ), 488 488 + false, 489 489 + ); 490 490 + useUIState.getState().setFocusedBlock({ 491 491 + entityType: "block", 492 492 + parent: nextSelectedBlock.parent, 493 493 + entityID: nextSelectedBlock.value, 494 494 + }); 495 495 + } else { 496 496 + let nextBlock = sortedSelection[1]; 497 497 + useUIState 498 498 + .getState() 499 499 + .removeBlockFromSelection({ value: b.entityID }); 500 500 + scrollIntoViewIfNeeded( 501 501 + document.getElementById( 502 502 + elementId.block(nextBlock.value).container, 503 503 + ), 504 504 + false, 505 505 + ); 506 506 + useUIState.getState().setFocusedBlock({ 507 507 + entityType: "block", 508 508 + parent: b.parent, 509 509 + entityID: nextBlock.value, 510 510 + }); 511 511 + if (sortedSelection.length === 2) { 512 512 + useEditorStates 513 513 + .getState() 514 514 + .editorStates[nextBlock.value]?.view?.focus(); 515 515 + } 516 516 + } 517 517 + } 518 518 + } 519 519 + if ((e.key === "c" || e.key === "x") && (e.metaKey || e.ctrlKey)) { 520 520 + if (!rep) return; 521 521 + if (e.shiftKey || (e.metaKey && e.ctrlKey)) return; 522 522 + let [, , selectionWithFoldedChildren] = 523 523 + await getSortedSelectionBound(); 524 524 + if (!selectionWithFoldedChildren) return; 525 525 + let el = document.activeElement as HTMLElement; 526 526 + if ( 527 527 + el?.tagName === "LABEL" || 528 528 + el?.tagName === "INPUT" || 529 529 + el?.tagName === "TEXTAREA" 530 530 + ) { 531 531 + return; 532 532 + } 533 533 + 534 534 + if ( 535 535 + el.contentEditable === "true" && 536 536 + selectionWithFoldedChildren.length <= 1 537 537 + ) 538 538 + return; 539 539 + e.preventDefault(); 540 540 + await copySelection(rep, selectionWithFoldedChildren); 541 541 + if (e.key === "x") deleteBlocks(); 542 542 + } 543 543 + }); 544 544 + window.addEventListener("keydown", listener); 545 545 + return () => { 546 546 + removeListener(); 547 547 + window.removeEventListener("keydown", listener); 548 548 + }; 549 549 + }, [moreThanOneSelected, rep, entity_set.permissions.write]); 550 550 + 551 551 + let [mouseDown, setMouseDown] = useState(false); 552 552 + let initialContentEditableParent = useRef<null | Node>(null); 553 553 + let savedSelection = useRef<SavedRange[] | null>(undefined); 554 554 + useEffect(() => { 555 555 + if (isMobile) return; 556 556 + if (!entity_set.permissions.write) return; 557 557 + let mouseDownListener = (e: MouseEvent) => { 558 558 + if ((e.target as Element).getAttribute("data-draggable")) return; 559 559 + let contentEditableParent = getContentEditableParent(e.target as Node); 560 560 + if (contentEditableParent) { 561 561 + setMouseDown(true); 562 562 + let entityID = (contentEditableParent as Element).getAttribute( 563 563 + "data-entityid", 564 564 + ); 565 565 + useSelectingMouse.setState({ start: entityID }); 566 566 + } 567 567 + initialContentEditableParent.current = contentEditableParent; 568 568 + }; 569 569 + let mouseUpListener = (e: MouseEvent) => { 570 570 + savedSelection.current = null; 571 571 + if ( 572 572 + initialContentEditableParent.current && 573 573 + !(e.target as Element).getAttribute("data-draggable") && 574 574 + getContentEditableParent(e.target as Node) !== 575 575 + initialContentEditableParent.current 576 576 + ) { 577 577 + setTimeout(() => { 578 578 + window.getSelection()?.removeAllRanges(); 579 579 + }, 5); 580 580 + } 581 581 + initialContentEditableParent.current = null; 582 582 + useSelectingMouse.setState({ start: null }); 583 583 + setMouseDown(false); 584 584 + }; 585 585 + window.addEventListener("mousedown", mouseDownListener); 586 586 + window.addEventListener("mouseup", mouseUpListener); 587 587 + return () => { 588 588 + window.removeEventListener("mousedown", mouseDownListener); 589 589 + window.removeEventListener("mouseup", mouseUpListener); 590 590 + }; 591 591 + }, [entity_set.permissions.write, isMobile]); 592 592 + useEffect(() => { 593 593 + if (!mouseDown) return; 594 594 + if (isMobile) return; 595 595 + let mouseMoveListener = (e: MouseEvent) => { 596 596 + if (e.buttons !== 1) return; 597 597 + if (initialContentEditableParent.current) { 598 598 + if ( 599 599 + initialContentEditableParent.current === 600 600 + getContentEditableParent(e.target as Node) 601 601 + ) { 602 602 + if (savedSelection.current) { 603 603 + restoreSelection(savedSelection.current); 604 604 + } 605 605 + savedSelection.current = null; 606 606 + return; 607 607 + } 608 608 + if (!savedSelection.current) savedSelection.current = saveSelection(); 609 609 + window.getSelection()?.removeAllRanges(); 610 610 + } 611 611 + }; 612 612 + window.addEventListener("mousemove", mouseMoveListener); 613 613 + return () => { 614 614 + window.removeEventListener("mousemove", mouseMoveListener); 615 615 + }; 616 616 + }, [mouseDown, isMobile]); 617 617 + return null; 618 618 + } 619 619 + 620 620 + type SavedRange = { 621 621 + startContainer: Node; 622 622 + startOffset: number; 623 623 + endContainer: Node; 624 624 + endOffset: number; 625 625 + direction: "forward" | "backward"; 626 626 + }; 627 627 + function saveSelection() { 628 628 + let selection = window.getSelection(); 629 629 + if (selection && selection.rangeCount > 0) { 630 630 + let ranges: SavedRange[] = []; 631 631 + for (let i = 0; i < selection.rangeCount; i++) { 632 632 + let range = selection.getRangeAt(i); 633 633 + ranges.push({ 634 634 + startContainer: range.startContainer, 635 635 + startOffset: range.startOffset, 636 636 + endContainer: range.endContainer, 637 637 + endOffset: range.endOffset, 638 638 + direction: 639 639 + selection.anchorNode === range.startContainer && 640 640 + selection.anchorOffset === range.startOffset 641 641 + ? "forward" 642 642 + : "backward", 643 643 + }); 644 644 + } 645 645 + return ranges; 646 646 + } 647 647 + return []; 648 648 + } 649 649 + 650 650 + function restoreSelection(savedRanges: SavedRange[]) { 651 651 + if (savedRanges && savedRanges.length > 0) { 652 652 + let selection = window.getSelection(); 653 653 + if (!selection) return; 654 654 + selection.removeAllRanges(); 655 655 + for (let i = 0; i < savedRanges.length; i++) { 656 656 + let range = document.createRange(); 657 657 + range.setStart(savedRanges[i].startContainer, savedRanges[i].startOffset); 658 658 + range.setEnd(savedRanges[i].endContainer, savedRanges[i].endOffset); 659 659 + 660 660 + selection.addRange(range); 661 661 + 662 662 + // If the direction is backward, collapse the selection to the end and then extend it backward 663 663 + if (savedRanges[i].direction === "backward") { 664 664 + selection.collapseToEnd(); 665 665 + selection.extend( 666 666 + savedRanges[i].startContainer, 667 667 + savedRanges[i].startOffset, 668 668 + ); 669 669 + } 670 670 + } 671 671 + } 672 672 + } 673 673 + 674 674 + function getContentEditableParent(e: Node | null): Node | null { 675 675 + let element: Node | null = e; 676 676 + while (element && element !== document) { 677 677 + if ( 678 678 + (element as HTMLElement).contentEditable === "true" || 679 679 + (element as HTMLElement).getAttribute("data-editable-block") 680 680 + ) { 681 681 + return element; 682 682 + } 683 683 + element = element.parentNode; 684 684 + } 685 685 + return null; 686 686 + } 687 687 + 688 688 + 689 689 + function toggleMarkInBlocks(blocks: string[], mark: MarkType, attrs?: any) { 690 690 + let everyBlockHasMark = blocks.reduce((acc, block) => { 691 691 + let editor = useEditorStates.getState().editorStates[block]; 692 692 + if (!editor) return acc; 693 693 + let { view } = editor; 694 694 + let from = 0; 695 695 + let to = view.state.doc.content.size; 696 696 + let hasMarkInRange = view.state.doc.rangeHasMark(from, to, mark); 697 697 + return acc && hasMarkInRange; 698 698 + }, true); 699 699 + for (let block of blocks) { 700 700 + let editor = useEditorStates.getState().editorStates[block]; 701 701 + if (!editor) return; 702 702 + let { view } = editor; 703 703 + let tr = view.state.tr; 704 704 + 705 705 + let from = 0; 706 706 + let to = view.state.doc.content.size; 707 707 + 708 708 + tr.setMeta("bulkOp", true); 709 709 + if (everyBlockHasMark) { 710 710 + tr.removeMark(from, to, mark); 711 711 + } else { 712 712 + tr.addMark(from, to, mark.create(attrs)); 713 713 + } 714 714 + 715 715 + view.dispatch(tr); 716 716 + } 717 717 + }

+48

components/SelectionManager/selectionState.ts

··· 1 1 + import { create } from "zustand"; 2 2 + import { Replicache } from "replicache"; 3 3 + import { ReplicacheMutators } from "src/replicache"; 4 4 + import { useUIState } from "src/useUIState"; 5 5 + import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 6 6 + 7 7 + export const useSelectingMouse = create(() => ({ 8 8 + start: null as null | string, 9 9 + })); 10 10 + 11 11 + export const getSortedSelection = async ( 12 12 + rep: Replicache<ReplicacheMutators>, 13 13 + ) => { 14 14 + let selectedBlocks = useUIState.getState().selectedBlocks; 15 15 + let foldedBlocks = useUIState.getState().foldedBlocks; 16 16 + if (!selectedBlocks[0]) return [[], []]; 17 17 + let siblings = 18 18 + (await rep?.query((tx) => 19 19 + getBlocksWithType(tx, selectedBlocks[0].parent), 20 20 + )) || []; 21 21 + let sortedBlocks = siblings.filter((s) => { 22 22 + let selected = selectedBlocks.find((sb) => sb.value === s.value); 23 23 + return selected; 24 24 + }); 25 25 + let sortedBlocksWithChildren = siblings.filter((s) => { 26 26 + let selected = selectedBlocks.find((sb) => sb.value === s.value); 27 27 + if (s.listData && !selected) { 28 28 + //Select the children of folded list blocks (in order to copy them) 29 29 + return s.listData.path.find( 30 30 + (p) => 31 31 + selectedBlocks.find((sb) => sb.value === p.entity) && 32 32 + foldedBlocks.includes(p.entity), 33 33 + ); 34 34 + } 35 35 + return selected; 36 36 + }); 37 37 + return [ 38 38 + sortedBlocks, 39 39 + siblings.filter( 40 40 + (f) => 41 41 + !f.listData || 42 42 + !f.listData.path.find( 43 43 + (p) => foldedBlocks.includes(p.entity) && p.entity !== f.value, 44 44 + ), 45 45 + ), 46 46 + sortedBlocksWithChildren, 47 47 + ]; 48 48 + };

-763

components/SelectionManager.tsx

··· 1 1 - "use client"; 2 2 - import { useEffect, useRef, useState } from "react"; 3 3 - import { create } from "zustand"; 4 4 - import { ReplicacheMutators, useReplicache } from "src/replicache"; 5 5 - import { useUIState } from "src/useUIState"; 6 6 - import { scanIndex } from "src/replicache/utils"; 7 7 - import { focusBlock } from "src/utils/focusBlock"; 8 8 - import { useEditorStates } from "src/state/useEditorState"; 9 9 - import { useEntitySetContext } from "./EntitySetProvider"; 10 10 - import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 11 11 - import { v7 } from "uuid"; 12 12 - import { indent, outdent, outdentFull } from "src/utils/list-operations"; 13 13 - import { addShortcut, Shortcut } from "src/shortcuts"; 14 14 - import { htmlToMarkdown } from "src/htmlMarkdownParsers"; 15 15 - import { elementId } from "src/utils/elementId"; 16 16 - import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 17 17 - import { copySelection } from "src/utils/copySelection"; 18 18 - import { isTextBlock } from "src/utils/isTextBlock"; 19 19 - import { useIsMobile } from "src/hooks/isMobile"; 20 20 - import { deleteBlock } from "./Blocks/DeleteBlock"; 21 21 - import { Replicache } from "replicache"; 22 22 - import { schema } from "./Blocks/TextBlock/schema"; 23 23 - import { TextSelection } from "prosemirror-state"; 24 24 - import { MarkType } from "prosemirror-model"; 25 25 - export const useSelectingMouse = create(() => ({ 26 26 - start: null as null | string, 27 27 - })); 28 28 - 29 29 - //How should I model selection? As ranges w/ a start and end? Store *blocks* so that I can just construct ranges? 30 30 - // How does this relate to *when dragging* ? 31 31 - 32 32 - export function SelectionManager() { 33 33 - let moreThanOneSelected = useUIState((s) => s.selectedBlocks.length > 1); 34 34 - let entity_set = useEntitySetContext(); 35 35 - let { rep, undoManager } = useReplicache(); 36 36 - let isMobile = useIsMobile(); 37 37 - useEffect(() => { 38 38 - if (!entity_set.permissions.write || !rep) return; 39 39 - const getSortedSelectionBound = getSortedSelection.bind(null, rep); 40 40 - let shortcuts: Shortcut[] = [ 41 41 - { 42 42 - metaKey: true, 43 43 - key: "ArrowUp", 44 44 - handler: async () => { 45 45 - let [firstBlock] = 46 46 - (await rep?.query((tx) => 47 47 - getBlocksWithType( 48 48 - tx, 49 49 - useUIState.getState().selectedBlocks[0].parent, 50 50 - ), 51 51 - )) || []; 52 52 - if (firstBlock) focusBlock(firstBlock, { type: "start" }); 53 53 - }, 54 54 - }, 55 55 - { 56 56 - metaKey: true, 57 57 - key: "ArrowDown", 58 58 - handler: async () => { 59 59 - let blocks = 60 60 - (await rep?.query((tx) => 61 61 - getBlocksWithType( 62 62 - tx, 63 63 - useUIState.getState().selectedBlocks[0].parent, 64 64 - ), 65 65 - )) || []; 66 66 - let folded = useUIState.getState().foldedBlocks; 67 67 - blocks = blocks.filter( 68 68 - (f) => 69 69 - !f.listData || 70 70 - !f.listData.path.find( 71 71 - (path) => 72 72 - folded.includes(path.entity) && f.value !== path.entity, 73 73 - ), 74 74 - ); 75 75 - let lastBlock = blocks[blocks.length - 1]; 76 76 - if (lastBlock) focusBlock(lastBlock, { type: "end" }); 77 77 - }, 78 78 - }, 79 79 - { 80 80 - metaKey: true, 81 81 - altKey: true, 82 82 - key: ["l", "¬"], 83 83 - handler: async () => { 84 84 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 85 85 - for (let block of sortedBlocks) { 86 86 - if (!block.listData) { 87 87 - await rep?.mutate.assertFact({ 88 88 - entity: block.value, 89 89 - attribute: "block/is-list", 90 90 - data: { type: "boolean", value: true }, 91 91 - }); 92 92 - } else { 93 93 - outdentFull(block, rep); 94 94 - } 95 95 - } 96 96 - }, 97 97 - }, 98 98 - { 99 99 - metaKey: true, 100 100 - shift: true, 101 101 - key: ["ArrowDown", "J"], 102 102 - handler: async () => { 103 103 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 104 104 - let block = sortedBlocks[0]; 105 105 - let nextBlock = siblings 106 106 - .slice(siblings.findIndex((s) => s.value === block.value) + 1) 107 107 - .find( 108 108 - (f) => 109 109 - f.listData && 110 110 - block.listData && 111 111 - !f.listData.path.find((f) => f.entity === block.value), 112 112 - ); 113 113 - if ( 114 114 - nextBlock?.listData && 115 115 - block.listData && 116 116 - nextBlock.listData.depth === block.listData.depth - 1 117 117 - ) { 118 118 - if (useUIState.getState().foldedBlocks.includes(nextBlock.value)) 119 119 - useUIState.getState().toggleFold(nextBlock.value); 120 120 - await rep?.mutate.moveBlock({ 121 121 - block: block.value, 122 122 - oldParent: block.listData?.parent, 123 123 - newParent: nextBlock.value, 124 124 - position: { type: "first" }, 125 125 - }); 126 126 - } else { 127 127 - await rep?.mutate.moveBlockDown({ 128 128 - entityID: block.value, 129 129 - parent: block.listData?.parent || block.parent, 130 130 - }); 131 131 - } 132 132 - }, 133 133 - }, 134 134 - { 135 135 - metaKey: true, 136 136 - shift: true, 137 137 - key: ["ArrowUp", "K"], 138 138 - handler: async () => { 139 139 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 140 140 - let block = sortedBlocks[0]; 141 141 - let previousBlock = 142 142 - siblings?.[siblings.findIndex((s) => s.value === block.value) - 1]; 143 143 - if (previousBlock.value === block.listData?.parent) { 144 144 - previousBlock = 145 145 - siblings?.[ 146 146 - siblings.findIndex((s) => s.value === block.value) - 2 147 147 - ]; 148 148 - } 149 149 - 150 150 - if ( 151 151 - previousBlock?.listData && 152 152 - block.listData && 153 153 - block.listData.depth > 1 && 154 154 - !previousBlock.listData.path.find( 155 155 - (f) => f.entity === block.listData?.parent, 156 156 - ) 157 157 - ) { 158 158 - let depth = block.listData.depth; 159 159 - let newParent = previousBlock.listData.path.find( 160 160 - (f) => f.depth === depth - 1, 161 161 - ); 162 162 - if (!newParent) return; 163 163 - if (useUIState.getState().foldedBlocks.includes(newParent.entity)) 164 164 - useUIState.getState().toggleFold(newParent.entity); 165 165 - rep?.mutate.moveBlock({ 166 166 - block: block.value, 167 167 - oldParent: block.listData?.parent, 168 168 - newParent: newParent.entity, 169 169 - position: { type: "end" }, 170 170 - }); 171 171 - } else { 172 172 - rep?.mutate.moveBlockUp({ 173 173 - entityID: block.value, 174 174 - parent: block.listData?.parent || block.parent, 175 175 - }); 176 176 - } 177 177 - }, 178 178 - }, 179 179 - 180 180 - { 181 181 - metaKey: true, 182 182 - shift: true, 183 183 - key: "Enter", 184 184 - handler: async () => { 185 185 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 186 186 - if (!sortedBlocks[0].listData) return; 187 187 - useUIState.getState().toggleFold(sortedBlocks[0].value); 188 188 - }, 189 189 - }, 190 190 - ]; 191 191 - if (moreThanOneSelected) 192 192 - shortcuts = shortcuts.concat([ 193 193 - { 194 194 - metaKey: true, 195 195 - key: "u", 196 196 - handler: async () => { 197 197 - let [sortedBlocks] = await getSortedSelectionBound(); 198 198 - toggleMarkInBlocks( 199 199 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 200 200 - schema.marks.underline, 201 201 - ); 202 202 - }, 203 203 - }, 204 204 - { 205 205 - metaKey: true, 206 206 - key: "i", 207 207 - handler: async () => { 208 208 - let [sortedBlocks] = await getSortedSelectionBound(); 209 209 - toggleMarkInBlocks( 210 210 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 211 211 - schema.marks.em, 212 212 - ); 213 213 - }, 214 214 - }, 215 215 - { 216 216 - metaKey: true, 217 217 - key: "b", 218 218 - handler: async () => { 219 219 - let [sortedBlocks] = await getSortedSelectionBound(); 220 220 - toggleMarkInBlocks( 221 221 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 222 222 - schema.marks.strong, 223 223 - ); 224 224 - }, 225 225 - }, 226 226 - { 227 227 - metaAndCtrl: true, 228 228 - key: "h", 229 229 - handler: async () => { 230 230 - let [sortedBlocks] = await getSortedSelectionBound(); 231 231 - toggleMarkInBlocks( 232 232 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 233 233 - schema.marks.highlight, 234 234 - { 235 235 - color: useUIState.getState().lastUsedHighlight, 236 236 - }, 237 237 - ); 238 238 - }, 239 239 - }, 240 240 - { 241 241 - metaAndCtrl: true, 242 242 - key: "x", 243 243 - handler: async () => { 244 244 - let [sortedBlocks] = await getSortedSelectionBound(); 245 245 - toggleMarkInBlocks( 246 246 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 247 247 - schema.marks.strikethrough, 248 248 - ); 249 249 - }, 250 250 - }, 251 251 - ]); 252 252 - let removeListener = addShortcut( 253 253 - shortcuts.map((shortcut) => ({ 254 254 - ...shortcut, 255 255 - handler: () => undoManager.withUndoGroup(() => shortcut.handler()), 256 256 - })), 257 257 - ); 258 258 - let listener = async (e: KeyboardEvent) => 259 259 - undoManager.withUndoGroup(async () => { 260 260 - //used here and in cut 261 261 - const deleteBlocks = async () => { 262 262 - if (!entity_set.permissions.write) return; 263 263 - if (moreThanOneSelected) { 264 264 - e.preventDefault(); 265 265 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 266 266 - let selectedBlocks = useUIState.getState().selectedBlocks; 267 267 - let firstBlock = sortedBlocks[0]; 268 268 - 269 269 - await rep?.mutate.removeBlock( 270 270 - selectedBlocks.map((block) => ({ blockEntity: block.value })), 271 271 - ); 272 272 - useUIState.getState().closePage(selectedBlocks.map((b) => b.value)); 273 273 - 274 274 - let nextBlock = 275 275 - siblings?.[ 276 276 - siblings.findIndex((s) => s.value === firstBlock.value) - 1 277 277 - ]; 278 278 - if (nextBlock) { 279 279 - useUIState.getState().setSelectedBlock({ 280 280 - value: nextBlock.value, 281 281 - parent: nextBlock.parent, 282 282 - }); 283 283 - let type = await rep?.query((tx) => 284 284 - scanIndex(tx).eav(nextBlock.value, "block/type"), 285 285 - ); 286 286 - if (!type?.[0]) return; 287 287 - if ( 288 288 - type[0]?.data.value === "text" || 289 289 - type[0]?.data.value === "heading" 290 290 - ) 291 291 - focusBlock( 292 292 - { 293 293 - value: nextBlock.value, 294 294 - type: "text", 295 295 - parent: nextBlock.parent, 296 296 - }, 297 297 - { type: "end" }, 298 298 - ); 299 299 - } 300 300 - } 301 301 - }; 302 302 - if (e.key === "Backspace" || e.key === "Delete") { 303 303 - deleteBlocks(); 304 304 - } 305 305 - if (e.key === "ArrowUp") { 306 306 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 307 307 - let focusedBlock = useUIState.getState().focusedEntity; 308 308 - if (!e.shiftKey && !e.ctrlKey) { 309 309 - if (e.defaultPrevented) return; 310 310 - if (sortedBlocks.length === 1) return; 311 311 - let firstBlock = sortedBlocks[0]; 312 312 - if (!firstBlock) return; 313 313 - let type = await rep?.query((tx) => 314 314 - scanIndex(tx).eav(firstBlock.value, "block/type"), 315 315 - ); 316 316 - if (!type?.[0]) return; 317 317 - useUIState.getState().setSelectedBlock(firstBlock); 318 318 - focusBlock( 319 319 - { ...firstBlock, type: type[0].data.value }, 320 320 - { type: "start" }, 321 321 - ); 322 322 - } else { 323 323 - if (e.defaultPrevented) return; 324 324 - if ( 325 325 - sortedBlocks.length <= 1 || 326 326 - !focusedBlock || 327 327 - focusedBlock.entityType === "page" 328 328 - ) 329 329 - return; 330 330 - let b = focusedBlock; 331 331 - let focusedBlockIndex = sortedBlocks.findIndex( 332 332 - (s) => s.value == b.entityID, 333 333 - ); 334 334 - if (focusedBlockIndex === 0) { 335 335 - let index = siblings.findIndex((s) => s.value === b.entityID); 336 336 - let nextSelectedBlock = siblings[index - 1]; 337 337 - if (!nextSelectedBlock) return; 338 338 - 339 339 - scrollIntoViewIfNeeded( 340 340 - document.getElementById( 341 341 - elementId.block(nextSelectedBlock.value).container, 342 342 - ), 343 343 - false, 344 344 - ); 345 345 - useUIState.getState().addBlockToSelection({ 346 346 - ...nextSelectedBlock, 347 347 - }); 348 348 - useUIState.getState().setFocusedBlock({ 349 349 - entityType: "block", 350 350 - parent: nextSelectedBlock.parent, 351 351 - entityID: nextSelectedBlock.value, 352 352 - }); 353 353 - } else { 354 354 - let nextBlock = sortedBlocks[sortedBlocks.length - 2]; 355 355 - useUIState.getState().setFocusedBlock({ 356 356 - entityType: "block", 357 357 - parent: b.parent, 358 358 - entityID: nextBlock.value, 359 359 - }); 360 360 - scrollIntoViewIfNeeded( 361 361 - document.getElementById( 362 362 - elementId.block(nextBlock.value).container, 363 363 - ), 364 364 - false, 365 365 - ); 366 366 - if (sortedBlocks.length === 2) { 367 367 - useEditorStates 368 368 - .getState() 369 369 - .editorStates[nextBlock.value]?.view?.focus(); 370 370 - } 371 371 - useUIState 372 372 - .getState() 373 373 - .removeBlockFromSelection(sortedBlocks[focusedBlockIndex]); 374 374 - } 375 375 - } 376 376 - } 377 377 - if (e.key === "ArrowLeft") { 378 378 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 379 379 - if (sortedSelection.length === 1) return; 380 380 - let firstBlock = sortedSelection[0]; 381 381 - if (!firstBlock) return; 382 382 - let type = await rep?.query((tx) => 383 383 - scanIndex(tx).eav(firstBlock.value, "block/type"), 384 384 - ); 385 385 - if (!type?.[0]) return; 386 386 - useUIState.getState().setSelectedBlock(firstBlock); 387 387 - focusBlock( 388 388 - { ...firstBlock, type: type[0].data.value }, 389 389 - { type: "start" }, 390 390 - ); 391 391 - } 392 392 - if (e.key === "ArrowRight") { 393 393 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 394 394 - if (sortedSelection.length === 1) return; 395 395 - let lastBlock = sortedSelection[sortedSelection.length - 1]; 396 396 - if (!lastBlock) return; 397 397 - let type = await rep?.query((tx) => 398 398 - scanIndex(tx).eav(lastBlock.value, "block/type"), 399 399 - ); 400 400 - if (!type?.[0]) return; 401 401 - useUIState.getState().setSelectedBlock(lastBlock); 402 402 - focusBlock( 403 403 - { ...lastBlock, type: type[0].data.value }, 404 404 - { type: "end" }, 405 405 - ); 406 406 - } 407 407 - if (e.key === "Tab") { 408 408 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 409 409 - if (sortedSelection.length <= 1) return; 410 410 - e.preventDefault(); 411 411 - if (e.shiftKey) { 412 412 - for (let i = siblings.length - 1; i >= 0; i--) { 413 413 - let block = siblings[i]; 414 414 - if (!sortedSelection.find((s) => s.value === block.value)) 415 415 - continue; 416 416 - if ( 417 417 - sortedSelection.find((s) => s.value === block.listData?.parent) 418 418 - ) 419 419 - continue; 420 420 - let parentoffset = 1; 421 421 - let previousBlock = siblings[i - parentoffset]; 422 422 - while ( 423 423 - previousBlock && 424 424 - sortedSelection.find((s) => previousBlock.value === s.value) 425 425 - ) { 426 426 - parentoffset += 1; 427 427 - previousBlock = siblings[i - parentoffset]; 428 428 - } 429 429 - if (!block.listData || !previousBlock.listData) continue; 430 430 - outdent(block, previousBlock, rep); 431 431 - } 432 432 - } else { 433 433 - for (let i = 0; i < siblings.length; i++) { 434 434 - let block = siblings[i]; 435 435 - if (!sortedSelection.find((s) => s.value === block.value)) 436 436 - continue; 437 437 - if ( 438 438 - sortedSelection.find((s) => s.value === block.listData?.parent) 439 439 - ) 440 440 - continue; 441 441 - let parentoffset = 1; 442 442 - let previousBlock = siblings[i - parentoffset]; 443 443 - while ( 444 444 - previousBlock && 445 445 - sortedSelection.find((s) => previousBlock.value === s.value) 446 446 - ) { 447 447 - parentoffset += 1; 448 448 - previousBlock = siblings[i - parentoffset]; 449 449 - } 450 450 - if (!block.listData || !previousBlock.listData) continue; 451 451 - indent(block, previousBlock, rep); 452 452 - } 453 453 - } 454 454 - } 455 455 - if (e.key === "ArrowDown") { 456 456 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 457 457 - let focusedBlock = useUIState.getState().focusedEntity; 458 458 - if (!e.shiftKey) { 459 459 - if (sortedSelection.length === 1) return; 460 460 - let lastBlock = sortedSelection[sortedSelection.length - 1]; 461 461 - if (!lastBlock) return; 462 462 - let type = await rep?.query((tx) => 463 463 - scanIndex(tx).eav(lastBlock.value, "block/type"), 464 464 - ); 465 465 - if (!type?.[0]) return; 466 466 - useUIState.getState().setSelectedBlock(lastBlock); 467 467 - focusBlock( 468 468 - { ...lastBlock, type: type[0].data.value }, 469 469 - { type: "end" }, 470 470 - ); 471 471 - } 472 472 - if (e.shiftKey) { 473 473 - if (e.defaultPrevented) return; 474 474 - if ( 475 475 - sortedSelection.length <= 1 || 476 476 - !focusedBlock || 477 477 - focusedBlock.entityType === "page" 478 478 - ) 479 479 - return; 480 480 - let b = focusedBlock; 481 481 - let focusedBlockIndex = sortedSelection.findIndex( 482 482 - (s) => s.value == b.entityID, 483 483 - ); 484 484 - if (focusedBlockIndex === sortedSelection.length - 1) { 485 485 - let index = siblings.findIndex((s) => s.value === b.entityID); 486 486 - let nextSelectedBlock = siblings[index + 1]; 487 487 - if (!nextSelectedBlock) return; 488 488 - useUIState.getState().addBlockToSelection({ 489 489 - ...nextSelectedBlock, 490 490 - }); 491 491 - 492 492 - scrollIntoViewIfNeeded( 493 493 - document.getElementById( 494 494 - elementId.block(nextSelectedBlock.value).container, 495 495 - ), 496 496 - false, 497 497 - ); 498 498 - useUIState.getState().setFocusedBlock({ 499 499 - entityType: "block", 500 500 - parent: nextSelectedBlock.parent, 501 501 - entityID: nextSelectedBlock.value, 502 502 - }); 503 503 - } else { 504 504 - let nextBlock = sortedSelection[1]; 505 505 - useUIState 506 506 - .getState() 507 507 - .removeBlockFromSelection({ value: b.entityID }); 508 508 - scrollIntoViewIfNeeded( 509 509 - document.getElementById( 510 510 - elementId.block(nextBlock.value).container, 511 511 - ), 512 512 - false, 513 513 - ); 514 514 - useUIState.getState().setFocusedBlock({ 515 515 - entityType: "block", 516 516 - parent: b.parent, 517 517 - entityID: nextBlock.value, 518 518 - }); 519 519 - if (sortedSelection.length === 2) { 520 520 - useEditorStates 521 521 - .getState() 522 522 - .editorStates[nextBlock.value]?.view?.focus(); 523 523 - } 524 524 - } 525 525 - } 526 526 - } 527 527 - if ((e.key === "c" || e.key === "x") && (e.metaKey || e.ctrlKey)) { 528 528 - if (!rep) return; 529 529 - if (e.shiftKey || (e.metaKey && e.ctrlKey)) return; 530 530 - let [, , selectionWithFoldedChildren] = 531 531 - await getSortedSelectionBound(); 532 532 - if (!selectionWithFoldedChildren) return; 533 533 - let el = document.activeElement as HTMLElement; 534 534 - if ( 535 535 - el?.tagName === "LABEL" || 536 536 - el?.tagName === "INPUT" || 537 537 - el?.tagName === "TEXTAREA" 538 538 - ) { 539 539 - return; 540 540 - } 541 541 - 542 542 - if ( 543 543 - el.contentEditable === "true" && 544 544 - selectionWithFoldedChildren.length <= 1 545 545 - ) 546 546 - return; 547 547 - e.preventDefault(); 548 548 - await copySelection(rep, selectionWithFoldedChildren); 549 549 - if (e.key === "x") deleteBlocks(); 550 550 - } 551 551 - }); 552 552 - window.addEventListener("keydown", listener); 553 553 - return () => { 554 554 - removeListener(); 555 555 - window.removeEventListener("keydown", listener); 556 556 - }; 557 557 - }, [moreThanOneSelected, rep, entity_set.permissions.write]); 558 558 - 559 559 - let [mouseDown, setMouseDown] = useState(false); 560 560 - let initialContentEditableParent = useRef<null | Node>(null); 561 561 - let savedSelection = useRef<SavedRange[] | null>(undefined); 562 562 - useEffect(() => { 563 563 - if (isMobile) return; 564 564 - if (!entity_set.permissions.write) return; 565 565 - let mouseDownListener = (e: MouseEvent) => { 566 566 - if ((e.target as Element).getAttribute("data-draggable")) return; 567 567 - let contentEditableParent = getContentEditableParent(e.target as Node); 568 568 - if (contentEditableParent) { 569 569 - setMouseDown(true); 570 570 - let entityID = (contentEditableParent as Element).getAttribute( 571 571 - "data-entityid", 572 572 - ); 573 573 - useSelectingMouse.setState({ start: entityID }); 574 574 - } 575 575 - initialContentEditableParent.current = contentEditableParent; 576 576 - }; 577 577 - let mouseUpListener = (e: MouseEvent) => { 578 578 - savedSelection.current = null; 579 579 - if ( 580 580 - initialContentEditableParent.current && 581 581 - !(e.target as Element).getAttribute("data-draggable") && 582 582 - getContentEditableParent(e.target as Node) !== 583 583 - initialContentEditableParent.current 584 584 - ) { 585 585 - setTimeout(() => { 586 586 - window.getSelection()?.removeAllRanges(); 587 587 - }, 5); 588 588 - } 589 589 - initialContentEditableParent.current = null; 590 590 - useSelectingMouse.setState({ start: null }); 591 591 - setMouseDown(false); 592 592 - }; 593 593 - window.addEventListener("mousedown", mouseDownListener); 594 594 - window.addEventListener("mouseup", mouseUpListener); 595 595 - return () => { 596 596 - window.removeEventListener("mousedown", mouseDownListener); 597 597 - window.removeEventListener("mouseup", mouseUpListener); 598 598 - }; 599 599 - }, [entity_set.permissions.write, isMobile]); 600 600 - useEffect(() => { 601 601 - if (!mouseDown) return; 602 602 - if (isMobile) return; 603 603 - let mouseMoveListener = (e: MouseEvent) => { 604 604 - if (e.buttons !== 1) return; 605 605 - if (initialContentEditableParent.current) { 606 606 - if ( 607 607 - initialContentEditableParent.current === 608 608 - getContentEditableParent(e.target as Node) 609 609 - ) { 610 610 - if (savedSelection.current) { 611 611 - restoreSelection(savedSelection.current); 612 612 - } 613 613 - savedSelection.current = null; 614 614 - return; 615 615 - } 616 616 - if (!savedSelection.current) savedSelection.current = saveSelection(); 617 617 - window.getSelection()?.removeAllRanges(); 618 618 - } 619 619 - }; 620 620 - window.addEventListener("mousemove", mouseMoveListener); 621 621 - return () => { 622 622 - window.removeEventListener("mousemove", mouseMoveListener); 623 623 - }; 624 624 - }, [mouseDown, isMobile]); 625 625 - return null; 626 626 - } 627 627 - 628 628 - type SavedRange = { 629 629 - startContainer: Node; 630 630 - startOffset: number; 631 631 - endContainer: Node; 632 632 - endOffset: number; 633 633 - direction: "forward" | "backward"; 634 634 - }; 635 635 - export function saveSelection() { 636 636 - let selection = window.getSelection(); 637 637 - if (selection && selection.rangeCount > 0) { 638 638 - let ranges: SavedRange[] = []; 639 639 - for (let i = 0; i < selection.rangeCount; i++) { 640 640 - let range = selection.getRangeAt(i); 641 641 - ranges.push({ 642 642 - startContainer: range.startContainer, 643 643 - startOffset: range.startOffset, 644 644 - endContainer: range.endContainer, 645 645 - endOffset: range.endOffset, 646 646 - direction: 647 647 - selection.anchorNode === range.startContainer && 648 648 - selection.anchorOffset === range.startOffset 649 649 - ? "forward" 650 650 - : "backward", 651 651 - }); 652 652 - } 653 653 - return ranges; 654 654 - } 655 655 - return []; 656 656 - } 657 657 - 658 658 - export function restoreSelection(savedRanges: SavedRange[]) { 659 659 - if (savedRanges && savedRanges.length > 0) { 660 660 - let selection = window.getSelection(); 661 661 - if (!selection) return; 662 662 - selection.removeAllRanges(); 663 663 - for (let i = 0; i < savedRanges.length; i++) { 664 664 - let range = document.createRange(); 665 665 - range.setStart(savedRanges[i].startContainer, savedRanges[i].startOffset); 666 666 - range.setEnd(savedRanges[i].endContainer, savedRanges[i].endOffset); 667 667 - 668 668 - selection.addRange(range); 669 669 - 670 670 - // If the direction is backward, collapse the selection to the end and then extend it backward 671 671 - if (savedRanges[i].direction === "backward") { 672 672 - selection.collapseToEnd(); 673 673 - selection.extend( 674 674 - savedRanges[i].startContainer, 675 675 - savedRanges[i].startOffset, 676 676 - ); 677 677 - } 678 678 - } 679 679 - } 680 680 - } 681 681 - 682 682 - function getContentEditableParent(e: Node | null): Node | null { 683 683 - let element: Node | null = e; 684 684 - while (element && element !== document) { 685 685 - if ( 686 686 - (element as HTMLElement).contentEditable === "true" || 687 687 - (element as HTMLElement).getAttribute("data-editable-block") 688 688 - ) { 689 689 - return element; 690 690 - } 691 691 - element = element.parentNode; 692 692 - } 693 693 - return null; 694 694 - } 695 695 - 696 696 - export const getSortedSelection = async ( 697 697 - rep: Replicache<ReplicacheMutators>, 698 698 - ) => { 699 699 - let selectedBlocks = useUIState.getState().selectedBlocks; 700 700 - let foldedBlocks = useUIState.getState().foldedBlocks; 701 701 - if (!selectedBlocks[0]) return [[], []]; 702 702 - let siblings = 703 703 - (await rep?.query((tx) => 704 704 - getBlocksWithType(tx, selectedBlocks[0].parent), 705 705 - )) || []; 706 706 - let sortedBlocks = siblings.filter((s) => { 707 707 - let selected = selectedBlocks.find((sb) => sb.value === s.value); 708 708 - return selected; 709 709 - }); 710 710 - let sortedBlocksWithChildren = siblings.filter((s) => { 711 711 - let selected = selectedBlocks.find((sb) => sb.value === s.value); 712 712 - if (s.listData && !selected) { 713 713 - //Select the children of folded list blocks (in order to copy them) 714 714 - return s.listData.path.find( 715 715 - (p) => 716 716 - selectedBlocks.find((sb) => sb.value === p.entity) && 717 717 - foldedBlocks.includes(p.entity), 718 718 - ); 719 719 - } 720 720 - return selected; 721 721 - }); 722 722 - return [ 723 723 - sortedBlocks, 724 724 - siblings.filter( 725 725 - (f) => 726 726 - !f.listData || 727 727 - !f.listData.path.find( 728 728 - (p) => foldedBlocks.includes(p.entity) && p.entity !== f.value, 729 729 - ), 730 730 - ), 731 731 - sortedBlocksWithChildren, 732 732 - ]; 733 733 - }; 734 734 - 735 735 - function toggleMarkInBlocks(blocks: string[], mark: MarkType, attrs?: any) { 736 736 - let everyBlockHasMark = blocks.reduce((acc, block) => { 737 737 - let editor = useEditorStates.getState().editorStates[block]; 738 738 - if (!editor) return acc; 739 739 - let { view } = editor; 740 740 - let from = 0; 741 741 - let to = view.state.doc.content.size; 742 742 - let hasMarkInRange = view.state.doc.rangeHasMark(from, to, mark); 743 743 - return acc && hasMarkInRange; 744 744 - }, true); 745 745 - for (let block of blocks) { 746 746 - let editor = useEditorStates.getState().editorStates[block]; 747 747 - if (!editor) return; 748 748 - let { view } = editor; 749 749 - let tr = view.state.tr; 750 750 - 751 751 - let from = 0; 752 752 - let to = view.state.doc.content.size; 753 753 - 754 754 - tr.setMeta("bulkOp", true); 755 755 - if (everyBlockHasMark) { 756 756 - tr.removeMark(from, to, mark); 757 757 - } else { 758 758 - tr.addMark(from, to, mark.create(attrs)); 759 759 - } 760 760 - 761 761 - view.dispatch(tr); 762 762 - } 763 763 - }

-394

components/ShareOptions/DomainOptions.tsx

··· 1 1 - import { useState } from "react"; 2 2 - import { ButtonPrimary } from "components/Buttons"; 3 3 - 4 4 - import { useSmoker, useToaster } from "components/Toast"; 5 5 - import { Input, InputWithLabel } from "components/Input"; 6 6 - import useSWR from "swr"; 7 7 - import { useIdentityData } from "components/IdentityProvider"; 8 8 - import { addDomain } from "actions/domains/addDomain"; 9 9 - import { callRPC } from "app/api/rpc/client"; 10 10 - import { useLeafletDomains } from "components/PageSWRDataProvider"; 11 11 - import { usePublishLink } from "."; 12 12 - import { addDomainPath } from "actions/domains/addDomainPath"; 13 13 - import { useReplicache } from "src/replicache"; 14 14 - import { deleteDomain } from "actions/domains/deleteDomain"; 15 15 - import { AddTiny } from "components/Icons/AddTiny"; 16 16 - 17 17 - type DomainMenuState = 18 18 - | { 19 19 - state: "default"; 20 20 - } 21 21 - | { 22 22 - state: "domain-settings"; 23 23 - domain: string; 24 24 - } 25 25 - | { 26 26 - state: "add-domain"; 27 27 - } 28 28 - | { 29 29 - state: "has-domain"; 30 30 - domain: string; 31 31 - }; 32 32 - export function CustomDomainMenu(props: { 33 33 - setShareMenuState: (s: "default") => void; 34 34 - }) { 35 35 - let { data: domains } = useLeafletDomains(); 36 36 - let [state, setState] = useState<DomainMenuState>( 37 37 - domains?.[0] 38 38 - ? { state: "has-domain", domain: domains[0].domain } 39 39 - : { state: "default" }, 40 40 - ); 41 41 - switch (state.state) { 42 42 - case "has-domain": 43 43 - case "default": 44 44 - return ( 45 45 - <DomainOptions 46 46 - setDomainMenuState={setState} 47 47 - domainConnected={false} 48 48 - setShareMenuState={props.setShareMenuState} 49 49 - /> 50 50 - ); 51 51 - case "domain-settings": 52 52 - return ( 53 53 - <DomainSettings domain={state.domain} setDomainMenuState={setState} /> 54 54 - ); 55 55 - case "add-domain": 56 56 - return <AddDomain setDomainMenuState={setState} />; 57 57 - } 58 58 - } 59 59 - 60 60 - export const DomainOptions = (props: { 61 61 - setShareMenuState: (s: "default") => void; 62 62 - setDomainMenuState: (state: DomainMenuState) => void; 63 63 - domainConnected: boolean; 64 64 - }) => { 65 65 - let { data: domains, mutate: mutateDomains } = useLeafletDomains(); 66 66 - let [selectedDomain, setSelectedDomain] = useState<string | undefined>( 67 67 - domains?.[0]?.domain, 68 68 - ); 69 69 - let [selectedRoute, setSelectedRoute] = useState( 70 70 - domains?.[0]?.route.slice(1) || "", 71 71 - ); 72 72 - let { identity } = useIdentityData(); 73 73 - let { permission_token } = useReplicache(); 74 74 - 75 75 - let toaster = useToaster(); 76 76 - let smoker = useSmoker(); 77 77 - let publishLink = usePublishLink(); 78 78 - 79 79 - return ( 80 80 - <div className="px-3 py-1 flex flex-col gap-3 max-w-full w-[600px]"> 81 81 - <h3 className="text-secondary">Choose a Domain</h3> 82 82 - <div className="flex flex-col gap-1 text-secondary"> 83 83 - {identity?.custom_domains 84 84 - .filter((d) => !d.publication_domains.length) 85 85 - .map((domain) => { 86 86 - return ( 87 87 - <DomainOption 88 88 - selectedRoute={selectedRoute} 89 89 - setSelectedRoute={setSelectedRoute} 90 90 - key={domain.domain} 91 91 - domain={domain.domain} 92 92 - checked={selectedDomain === domain.domain} 93 93 - setChecked={setSelectedDomain} 94 94 - setDomainMenuState={props.setDomainMenuState} 95 95 - /> 96 96 - ); 97 97 - })} 98 98 - <button 99 99 - onMouseDown={() => { 100 100 - props.setDomainMenuState({ state: "add-domain" }); 101 101 - }} 102 102 - className="text-accent-contrast flex gap-2 items-center px-1 py-0.5" 103 103 - > 104 104 - <AddTiny /> Add a New Domain 105 105 - </button> 106 106 - </div> 107 107 - 108 108 - {/* ONLY SHOW IF A DOMAIN IS CURRENTLY CONNECTED */} 109 109 - <div className="flex gap-3 items-center justify-end"> 110 110 - {props.domainConnected && ( 111 111 - <button 112 112 - onMouseDown={() => { 113 113 - props.setShareMenuState("default"); 114 114 - toaster({ 115 115 - content: ( 116 116 - <div className="font-bold"> 117 117 - Unpublished from custom domain! 118 118 - </div> 119 119 - ), 120 120 - type: "error", 121 121 - }); 122 122 - }} 123 123 - > 124 124 - Unpublish 125 125 - </button> 126 126 - )} 127 127 - 128 128 - <ButtonPrimary 129 129 - id="publish-to-domain" 130 130 - disabled={ 131 131 - domains?.[0] 132 132 - ? domains[0].domain === selectedDomain && 133 133 - domains[0].route.slice(1) === selectedRoute 134 134 - : !selectedDomain 135 135 - } 136 136 - onClick={async () => { 137 137 - // let rect = document 138 138 - // .getElementById("publish-to-domain") 139 139 - // ?.getBoundingClientRect(); 140 140 - // smoker({ 141 141 - // error: true, 142 142 - // text: "url already in use!", 143 143 - // position: { 144 144 - // x: rect ? rect.left : 0, 145 145 - // y: rect ? rect.top + 26 : 0, 146 146 - // }, 147 147 - // }); 148 148 - if (!selectedDomain || !publishLink) return; 149 149 - await addDomainPath({ 150 150 - domain: selectedDomain, 151 151 - route: "/" + selectedRoute, 152 152 - view_permission_token: publishLink, 153 153 - edit_permission_token: permission_token.id, 154 154 - }); 155 155 - 156 156 - toaster({ 157 157 - content: ( 158 158 - <div className="font-bold"> 159 159 - Published to custom domain!{" "} 160 160 - <a 161 161 - className="underline text-accent-2" 162 162 - href={`https://${selectedDomain}/${selectedRoute}`} 163 163 - target="_blank" 164 164 - > 165 165 - View 166 166 - </a> 167 167 - </div> 168 168 - ), 169 169 - type: "success", 170 170 - }); 171 171 - mutateDomains(); 172 172 - props.setShareMenuState("default"); 173 173 - }} 174 174 - > 175 175 - Publish! 176 176 - </ButtonPrimary> 177 177 - </div> 178 178 - </div> 179 179 - ); 180 180 - }; 181 181 - 182 182 - const DomainOption = (props: { 183 183 - selectedRoute: string; 184 184 - setSelectedRoute: (s: string) => void; 185 185 - checked: boolean; 186 186 - setChecked: (checked: string) => void; 187 187 - domain: string; 188 188 - setDomainMenuState: (state: DomainMenuState) => void; 189 189 - }) => { 190 190 - let [value, setValue] = useState(""); 191 191 - let { data } = useSWR(props.domain, async (domain) => { 192 192 - return await callRPC("get_domain_status", { domain }); 193 193 - }); 194 194 - let pending = data?.config?.misconfigured || data?.error; 195 195 - return ( 196 196 - <label htmlFor={props.domain}> 197 197 - <input 198 198 - type="radio" 199 199 - name={props.domain} 200 200 - id={props.domain} 201 201 - value={props.domain} 202 202 - checked={props.checked} 203 203 - className="hidden appearance-none" 204 204 - onChange={() => { 205 205 - if (pending) return; 206 206 - props.setChecked(props.domain); 207 207 - }} 208 208 - /> 209 209 - <div 210 210 - className={` 211 211 - px-[6px] py-1 212 212 - flex 213 213 - border rounded-md 214 214 - ${ 215 215 - pending 216 216 - ? "border-border-light text-secondary justify-between gap-2 items-center " 217 217 - : !props.checked 218 218 - ? "flex-wrap border-border-light" 219 219 - : "flex-wrap border-accent-1 bg-accent-1 text-accent-2 font-bold" 220 220 - } `} 221 221 - > 222 222 - <div className={`w-max truncate ${pending && "animate-pulse"}`}> 223 223 - {props.domain} 224 224 - </div> 225 225 - {props.checked && ( 226 226 - <div className="flex gap-0 w-full"> 227 227 - <span 228 228 - className="font-normal" 229 229 - style={value === "" ? { opacity: "0.5" } : {}} 230 230 - > 231 231 - / 232 232 - </span> 233 233 - 234 234 - <Input 235 235 - type="text" 236 236 - autoFocus 237 237 - className="appearance-none focus:outline-hidden font-normal text-accent-2 w-full bg-transparent placeholder:text-accent-2 placeholder:opacity-50" 238 238 - placeholder="add-optional-path" 239 239 - onChange={(e) => props.setSelectedRoute(e.target.value)} 240 240 - value={props.selectedRoute} 241 241 - /> 242 242 - </div> 243 243 - )} 244 244 - {pending && ( 245 245 - <button 246 246 - className="text-accent-contrast text-sm" 247 247 - onMouseDown={() => { 248 248 - props.setDomainMenuState({ 249 249 - state: "domain-settings", 250 250 - domain: props.domain, 251 251 - }); 252 252 - }} 253 253 - > 254 254 - pending 255 255 - </button> 256 256 - )} 257 257 - </div> 258 258 - </label> 259 259 - ); 260 260 - }; 261 261 - 262 262 - export const AddDomain = (props: { 263 263 - setDomainMenuState: (state: DomainMenuState) => void; 264 264 - }) => { 265 265 - let [value, setValue] = useState(""); 266 266 - let { mutate } = useIdentityData(); 267 267 - let smoker = useSmoker(); 268 268 - return ( 269 269 - <div className="flex flex-col gap-1 px-3 py-1 max-w-full w-[600px]"> 270 270 - <div> 271 271 - <h3 className="text-secondary">Add a New Domain</h3> 272 272 - <div className="text-xs italic text-secondary"> 273 273 - Don't include the protocol or path, just the base domain name for now 274 274 - </div> 275 275 - </div> 276 276 - 277 277 - <Input 278 278 - className="input-with-border text-primary" 279 279 - placeholder="www.example.com" 280 280 - value={value} 281 281 - onChange={(e) => setValue(e.target.value)} 282 282 - /> 283 283 - 284 284 - <ButtonPrimary 285 285 - disabled={!value} 286 286 - className="place-self-end mt-2" 287 287 - onMouseDown={async (e) => { 288 288 - // call the vercel api, set the thing... 289 289 - let { error } = await addDomain(value); 290 290 - if (error) { 291 291 - smoker({ 292 292 - error: true, 293 293 - text: 294 294 - error === "invalid_domain" 295 295 - ? "Invalid domain! Use just the base domain" 296 296 - : error === "domain_already_in_use" 297 297 - ? "That domain is already in use!" 298 298 - : "An unknown error occured", 299 299 - position: { 300 300 - y: e.clientY, 301 301 - x: e.clientX - 5, 302 302 - }, 303 303 - }); 304 304 - return; 305 305 - } 306 306 - mutate(); 307 307 - props.setDomainMenuState({ state: "domain-settings", domain: value }); 308 308 - }} 309 309 - > 310 310 - Verify Domain 311 311 - </ButtonPrimary> 312 312 - </div> 313 313 - ); 314 314 - }; 315 315 - 316 316 - const DomainSettings = (props: { 317 317 - domain: string; 318 318 - setDomainMenuState: (s: DomainMenuState) => void; 319 319 - }) => { 320 320 - let isSubdomain = props.domain.split(".").length > 2; 321 321 - return ( 322 322 - <div className="flex flex-col gap-1 px-3 py-1 max-w-full w-[600px]"> 323 323 - <h3 className="text-secondary">Verify Domain</h3> 324 324 - 325 325 - <div className="text-secondary text-sm flex flex-col gap-3"> 326 326 - <div className="flex flex-col gap-[6px]"> 327 327 - <div> 328 328 - To verify this domain, add the following record to your DNS provider 329 329 - for <strong>{props.domain}</strong>. 330 330 - </div> 331 331 - 332 332 - {isSubdomain ? ( 333 333 - <div className="flex gap-3 p-1 border border-border-light rounded-md py-1"> 334 334 - <div className="flex flex-col "> 335 335 - <div className="text-tertiary">Type</div> 336 336 - <div>CNAME</div> 337 337 - </div> 338 338 - <div className="flex flex-col"> 339 339 - <div className="text-tertiary">Name</div> 340 340 - <div style={{ wordBreak: "break-word" }}> 341 341 - {props.domain.split(".").slice(0, -2).join(".")} 342 342 - </div> 343 343 - </div> 344 344 - <div className="flex flex-col"> 345 345 - <div className="text-tertiary">Value</div> 346 346 - <div style={{ wordBreak: "break-word" }}> 347 347 - cname.vercel-dns.com 348 348 - </div> 349 349 - </div> 350 350 - </div> 351 351 - ) : ( 352 352 - <div className="flex gap-3 p-1 border border-border-light rounded-md py-1"> 353 353 - <div className="flex flex-col "> 354 354 - <div className="text-tertiary">Type</div> 355 355 - <div>A</div> 356 356 - </div> 357 357 - <div className="flex flex-col"> 358 358 - <div className="text-tertiary">Name</div> 359 359 - <div>@</div> 360 360 - </div> 361 361 - <div className="flex flex-col"> 362 362 - <div className="text-tertiary">Value</div> 363 363 - <div>76.76.21.21</div> 364 364 - </div> 365 365 - </div> 366 366 - )} 367 367 - </div> 368 368 - <div> 369 369 - Once you do this, the status may be pending for up to a few hours. 370 370 - </div> 371 371 - <div>Check back later to see if verification was successful.</div> 372 372 - </div> 373 373 - 374 374 - <div className="flex gap-3 justify-between items-center mt-2"> 375 375 - <button 376 376 - className="text-accent-contrast font-bold " 377 377 - onMouseDown={async () => { 378 378 - await deleteDomain({ domain: props.domain }); 379 379 - props.setDomainMenuState({ state: "default" }); 380 380 - }} 381 381 - > 382 382 - Delete Domain 383 383 - </button> 384 384 - <ButtonPrimary 385 385 - onMouseDown={() => { 386 386 - props.setDomainMenuState({ state: "default" }); 387 387 - }} 388 388 - > 389 389 - Back to Domains 390 390 - </ButtonPrimary> 391 391 - </div> 392 392 - </div> 393 393 - ); 394 394 - };

-70

components/ShareOptions/getShareLink.ts

··· 1 1 - "use server"; 2 2 - 3 3 - import { eq, and } from "drizzle-orm"; 4 4 - import { drizzle } from "drizzle-orm/node-postgres"; 5 5 - import { permission_token_rights, permission_tokens } from "drizzle/schema"; 6 6 - import { pool } from "supabase/pool"; 7 7 - export async function getShareLink( 8 8 - token: { id: string; entity_set: string }, 9 9 - rootEntity: string, 10 10 - ) { 11 11 - const client = await pool.connect(); 12 12 - const db = drizzle(client); 13 13 - let link = await db.transaction(async (tx) => { 14 14 - // This will likely error out when if we have multiple permission 15 15 - // token rights associated with a single token 16 16 - let [tokenW] = await tx 17 17 - .select() 18 18 - .from(permission_tokens) 19 19 - .leftJoin( 20 20 - permission_token_rights, 21 21 - eq(permission_token_rights.token, permission_tokens.id), 22 22 - ) 23 23 - .where(eq(permission_tokens.id, token.id)); 24 24 - if ( 25 25 - !tokenW.permission_token_rights || 26 26 - tokenW.permission_token_rights.create_token !== true || 27 27 - tokenW.permission_tokens.root_entity !== rootEntity || 28 28 - tokenW.permission_token_rights.entity_set !== token.entity_set 29 29 - ) { 30 30 - return null; 31 31 - } 32 32 - 33 33 - let [existingToken] = await tx 34 34 - .select() 35 35 - .from(permission_tokens) 36 36 - .rightJoin( 37 37 - permission_token_rights, 38 38 - eq(permission_token_rights.token, permission_tokens.id), 39 39 - ) 40 40 - .where( 41 41 - and( 42 42 - eq(permission_token_rights.read, true), 43 43 - eq(permission_token_rights.write, false), 44 44 - eq(permission_token_rights.create_token, false), 45 45 - eq(permission_token_rights.change_entity_set, false), 46 46 - eq(permission_token_rights.entity_set, token.entity_set), 47 47 - eq(permission_tokens.root_entity, rootEntity), 48 48 - ), 49 49 - ); 50 50 - if (existingToken) { 51 51 - return existingToken.permission_tokens; 52 52 - } 53 53 - let [newToken] = await tx 54 54 - .insert(permission_tokens) 55 55 - .values({ root_entity: rootEntity }) 56 56 - .returning(); 57 57 - await tx.insert(permission_token_rights).values({ 58 58 - entity_set: token.entity_set, 59 59 - token: newToken.id, 60 60 - read: true, 61 61 - write: false, 62 62 - create_token: false, 63 63 - change_entity_set: false, 64 64 - }); 65 65 - return newToken; 66 66 - }); 67 67 - 68 68 - client.release(); 69 69 - return link; 70 70 - }

-256

components/ShareOptions/index.tsx

··· 1 1 - import { useReplicache } from "src/replicache"; 2 2 - import React, { useEffect, useState } from "react"; 3 3 - import { getShareLink } from "./getShareLink"; 4 4 - import { useEntitySetContext } from "components/EntitySetProvider"; 5 5 - import { useSmoker } from "components/Toast"; 6 6 - import { Menu, MenuItem } from "components/Layout"; 7 7 - import { ActionButton } from "components/ActionBar/ActionButton"; 8 8 - import useSWR from "swr"; 9 9 - import LoginForm from "app/login/LoginForm"; 10 10 - import { CustomDomainMenu } from "./DomainOptions"; 11 11 - import { useIdentityData } from "components/IdentityProvider"; 12 12 - import { 13 13 - useLeafletDomains, 14 14 - useLeafletPublicationData, 15 15 - } from "components/PageSWRDataProvider"; 16 16 - import { ShareSmall } from "components/Icons/ShareSmall"; 17 17 - import { PubLeafletDocument } from "lexicons/api"; 18 18 - import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 19 19 - import { AtUri } from "@atproto/syntax"; 20 20 - import { useIsMobile } from "src/hooks/isMobile"; 21 21 - 22 22 - export type ShareMenuStates = "default" | "login" | "domain"; 23 23 - 24 24 - export let usePublishLink = () => { 25 25 - let { permission_token, rootEntity } = useReplicache(); 26 26 - let entity_set = useEntitySetContext(); 27 27 - let { data: publishLink } = useSWR( 28 28 - "publishLink-" + permission_token.id, 29 29 - async () => { 30 30 - if ( 31 31 - !permission_token.permission_token_rights.find( 32 32 - (s) => s.entity_set === entity_set.set && s.create_token, 33 33 - ) 34 34 - ) 35 35 - return; 36 36 - let shareLink = await getShareLink( 37 37 - { id: permission_token.id, entity_set: entity_set.set }, 38 38 - rootEntity, 39 39 - ); 40 40 - return shareLink?.id; 41 41 - }, 42 42 - ); 43 43 - return publishLink; 44 44 - }; 45 45 - 46 46 - export function ShareOptions() { 47 47 - let [menuState, setMenuState] = useState<ShareMenuStates>("default"); 48 48 - let { data: pub } = useLeafletPublicationData(); 49 49 - let isMobile = useIsMobile(); 50 50 - 51 51 - return ( 52 52 - <Menu 53 53 - asChild 54 54 - side={isMobile ? "top" : "right"} 55 55 - align={isMobile ? "center" : "start"} 56 56 - className="max-w-xs" 57 57 - onOpenChange={() => { 58 58 - setMenuState("default"); 59 59 - }} 60 60 - trigger={ 61 61 - <ActionButton 62 62 - icon=<ShareSmall /> 63 63 - primary={!!!pub} 64 64 - secondary={!!pub} 65 65 - label={`Share ${pub ? "Draft" : ""}`} 66 66 - /> 67 67 - } 68 68 - > 69 69 - {menuState === "login" ? ( 70 70 - <div className="px-3 py-1"> 71 71 - <LoginForm text="Save your Leaflets and access them on multiple devices!" /> 72 72 - </div> 73 73 - ) : menuState === "domain" ? ( 74 74 - <CustomDomainMenu setShareMenuState={setMenuState} /> 75 75 - ) : ( 76 76 - <ShareMenu 77 77 - setMenuState={setMenuState} 78 78 - domainConnected={false} 79 79 - isPub={!!pub} 80 80 - /> 81 81 - )} 82 82 - </Menu> 83 83 - ); 84 84 - } 85 85 - 86 86 - const ShareMenu = (props: { 87 87 - setMenuState: (state: ShareMenuStates) => void; 88 88 - domainConnected: boolean; 89 89 - isPub?: boolean; 90 90 - }) => { 91 91 - let { permission_token } = useReplicache(); 92 92 - let { data: pub } = useLeafletPublicationData(); 93 93 - 94 94 - let record = pub?.documents?.data as PubLeafletDocument.Record | null; 95 95 - 96 96 - let postLink = 97 97 - pub?.publications && pub.documents 98 98 - ? `${getPublicationURL(pub.publications)}/${new AtUri(pub?.documents.uri).rkey}` 99 99 - : null; 100 100 - let publishLink = usePublishLink(); 101 101 - let [collabLink, setCollabLink] = useState<null | string>(null); 102 102 - useEffect(() => { 103 103 - // strip leading '/' character from pathname 104 104 - setCollabLink(window.location.pathname.slice(1)); 105 105 - }, []); 106 106 - let { data: domains } = useLeafletDomains(); 107 107 - 108 108 - return ( 109 109 - <> 110 110 - <ShareButton 111 111 - text={`Share ${postLink ? "Draft" : ""} Edit Link`} 112 112 - subtext="" 113 113 - smokerText="Edit link copied!" 114 114 - id="get-edit-link" 115 115 - link={collabLink} 116 116 - /> 117 117 - <ShareButton 118 118 - text={`Share ${postLink ? "Draft" : ""} View Link`} 119 119 - subtext=<> 120 120 - {domains?.[0] ? ( 121 121 - <> 122 122 - This Leaflet is published on{" "} 123 123 - <span className="italic underline"> 124 124 - {domains[0].domain} 125 125 - {domains[0].route} 126 126 - </span> 127 127 - </> 128 128 - ) : ( 129 129 - "" 130 130 - )} 131 131 - </> 132 132 - smokerText="View link copied!" 133 133 - id="get-view-link" 134 134 - fullLink={ 135 135 - domains?.[0] 136 136 - ? `https://${domains[0].domain}${domains[0].route}` 137 137 - : undefined 138 138 - } 139 139 - link={publishLink || ""} 140 140 - /> 141 141 - {postLink && ( 142 142 - <> 143 143 - <hr className="border-border-light" /> 144 144 - 145 145 - <ShareButton 146 146 - text="Share Published Link" 147 147 - subtext="" 148 148 - smokerText="Post link copied!" 149 149 - id="get-post-link" 150 150 - fullLink={postLink.includes("http") ? postLink : undefined} 151 151 - link={postLink} 152 152 - /> 153 153 - </> 154 154 - )} 155 155 - {!props.isPub && ( 156 156 - <> 157 157 - <hr className="border-border mt-1" /> 158 158 - <DomainMenuItem setMenuState={props.setMenuState} /> 159 159 - </> 160 160 - )} 161 161 - </> 162 162 - ); 163 163 - }; 164 164 - 165 165 - export const ShareButton = (props: { 166 166 - text: React.ReactNode; 167 167 - subtext?: React.ReactNode; 168 168 - smokerText: string; 169 169 - id: string; 170 170 - link: null | string; 171 171 - fullLink?: string; 172 172 - className?: string; 173 173 - }) => { 174 174 - let smoker = useSmoker(); 175 175 - 176 176 - return ( 177 177 - <MenuItem 178 178 - id={props.id} 179 179 - onSelect={(e) => { 180 180 - e.preventDefault(); 181 181 - let rect = document.getElementById(props.id)?.getBoundingClientRect(); 182 182 - if (props.link || props.fullLink) { 183 183 - navigator.clipboard.writeText( 184 184 - props.fullLink 185 185 - ? props.fullLink 186 186 - : `${location.protocol}//${location.host}/${props.link}`, 187 187 - ); 188 188 - smoker({ 189 189 - position: { 190 190 - x: rect ? rect.left + (rect.right - rect.left) / 2 : 0, 191 191 - y: rect ? rect.top + 26 : 0, 192 192 - }, 193 193 - text: props.smokerText, 194 194 - }); 195 195 - } 196 196 - }} 197 197 - > 198 198 - <div className={`group/${props.id} ${props.className} leading-snug`}> 199 199 - {props.text} 200 200 - 201 201 - {props.subtext && ( 202 202 - <div className={`text-sm font-normal text-tertiary`}> 203 203 - {props.subtext} 204 204 - </div> 205 205 - )} 206 206 - </div> 207 207 - </MenuItem> 208 208 - ); 209 209 - }; 210 210 - 211 211 - const DomainMenuItem = (props: { 212 212 - setMenuState: (state: ShareMenuStates) => void; 213 213 - }) => { 214 214 - let { identity } = useIdentityData(); 215 215 - let { data: domains } = useLeafletDomains(); 216 216 - 217 217 - if (identity === null) 218 218 - return ( 219 219 - <div className="text-tertiary font-normal text-sm px-3 py-1"> 220 220 - <button 221 221 - className="text-accent-contrast hover:font-bold" 222 222 - onClick={() => { 223 223 - props.setMenuState("login"); 224 224 - }} 225 225 - > 226 226 - Log In 227 227 - </button>{" "} 228 228 - to publish on a custom domain! 229 229 - </div> 230 230 - ); 231 231 - else 232 232 - return ( 233 233 - <> 234 234 - {domains?.[0] ? ( 235 235 - <button 236 236 - className="px-3 py-1 text-accent-contrast text-sm hover:font-bold w-fit text-left" 237 237 - onMouseDown={() => { 238 238 - props.setMenuState("domain"); 239 239 - }} 240 240 - > 241 241 - Edit custom domain 242 242 - </button> 243 243 - ) : ( 244 244 - <MenuItem 245 245 - className="font-normal text-tertiary text-sm" 246 246 - onSelect={(e) => { 247 247 - e.preventDefault(); 248 248 - props.setMenuState("domain"); 249 249 - }} 250 250 - > 251 251 - Publish on a custom domain 252 252 - </MenuItem> 253 253 - )} 254 254 - </> 255 255 - ); 256 256 - };

+296

components/Tags.tsx

··· 1 1 + "use client"; 2 2 + import { CloseTiny } from "components/Icons/CloseTiny"; 3 3 + import { Input } from "components/Input"; 4 4 + import { useState, useRef } from "react"; 5 5 + import { useDebouncedEffect } from "src/hooks/useDebouncedEffect"; 6 6 + import { Popover } from "components/Popover"; 7 7 + import Link from "next/link"; 8 8 + import { searchTags, type TagSearchResult } from "actions/searchTags"; 9 9 + 10 10 + export const Tag = (props: { 11 11 + name: string; 12 12 + selected?: boolean; 13 13 + onDelete?: (tag: string) => void; 14 14 + className?: string; 15 15 + }) => { 16 16 + return ( 17 17 + <div 18 18 + className={`tag flex items-center text-xs rounded-md border ${props.selected ? "bg-accent-1 border-accent-1 font-bold" : "bg-bg-page border-border"} ${props.className}`} 19 19 + > 20 20 + <Link 21 21 + href={`https://leaflet.pub/tag/${encodeURIComponent(props.name)}`} 22 22 + className={`px-1 py-0.5 hover:no-underline! ${props.selected ? "text-accent-2" : "text-tertiary"}`} 23 23 + > 24 24 + {props.name}{" "} 25 25 + </Link> 26 26 + {props.selected ? ( 27 27 + <button 28 28 + type="button" 29 29 + onClick={() => (props.onDelete ? props.onDelete(props.name) : null)} 30 30 + > 31 31 + <CloseTiny className="scale-75 pr-1 text-accent-2" /> 32 32 + </button> 33 33 + ) : null} 34 34 + </div> 35 35 + ); 36 36 + }; 37 37 + 38 38 + export const TagSelector = (props: { 39 39 + selectedTags: string[]; 40 40 + setSelectedTags: (tags: string[]) => void; 41 41 + }) => { 42 42 + return ( 43 43 + <div className="flex flex-col gap-2 text-primary"> 44 44 + <TagSearchInput 45 45 + selectedTags={props.selectedTags} 46 46 + setSelectedTags={props.setSelectedTags} 47 47 + /> 48 48 + {props.selectedTags.length > 0 ? ( 49 49 + <div className="flex flex-wrap gap-2 "> 50 50 + {props.selectedTags.map((tag) => ( 51 51 + <Tag 52 52 + key={tag} 53 53 + name={tag} 54 54 + selected 55 55 + onDelete={() => { 56 56 + props.setSelectedTags( 57 57 + props.selectedTags.filter((t) => t !== tag), 58 58 + ); 59 59 + }} 60 60 + /> 61 61 + ))} 62 62 + </div> 63 63 + ) : ( 64 64 + <div className="text-tertiary italic text-sm h-6">no tags selected</div> 65 65 + )} 66 66 + </div> 67 67 + ); 68 68 + }; 69 69 + 70 70 + export const TagSearchInput = (props: { 71 71 + selectedTags: string[]; 72 72 + setSelectedTags: (tags: string[]) => void; 73 73 + }) => { 74 74 + let [tagInputValue, setTagInputValue] = useState(""); 75 75 + let [isOpen, setIsOpen] = useState(false); 76 76 + let [highlightedIndex, setHighlightedIndex] = useState(0); 77 77 + let [searchResults, setSearchResults] = useState<TagSearchResult[]>([]); 78 78 + let [isSearching, setIsSearching] = useState(false); 79 79 + 80 80 + const placeholderInputRef = useRef<HTMLButtonElement | null>(null); 81 81 + 82 82 + let inputWidth = placeholderInputRef.current?.clientWidth; 83 83 + 84 84 + // Fetch tags whenever the input value changes 85 85 + useDebouncedEffect( 86 86 + async () => { 87 87 + setIsSearching(true); 88 88 + const results = await searchTags(tagInputValue); 89 89 + if (results) { 90 90 + setSearchResults(results); 91 91 + } 92 92 + setIsSearching(false); 93 93 + }, 94 94 + 300, 95 95 + [tagInputValue], 96 96 + ); 97 97 + 98 98 + const filteredTags = searchResults 99 99 + .filter((tag) => !props.selectedTags.includes(tag.name)) 100 100 + .filter((tag) => 101 101 + tag.name.toLowerCase().includes(tagInputValue.toLowerCase()), 102 102 + ); 103 103 + 104 104 + const showResults = tagInputValue.length >= 3; 105 105 + 106 106 + function clearTagInput() { 107 107 + setHighlightedIndex(0); 108 108 + setTagInputValue(""); 109 109 + } 110 110 + 111 111 + function selectTag(tag: string) { 112 112 + console.log("selected " + tag); 113 113 + props.setSelectedTags([...props.selectedTags, tag]); 114 114 + clearTagInput(); 115 115 + } 116 116 + 117 117 + const handleKeyDown = ( 118 118 + e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>, 119 119 + ) => { 120 120 + if (!isOpen) return; 121 121 + 122 122 + if (e.key === "ArrowDown") { 123 123 + e.preventDefault(); 124 124 + setHighlightedIndex((prev) => 125 125 + prev < filteredTags.length ? prev + 1 : prev, 126 126 + ); 127 127 + } else if (e.key === "ArrowUp") { 128 128 + e.preventDefault(); 129 129 + setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0)); 130 130 + } else if (e.key === "Enter") { 131 131 + e.preventDefault(); 132 132 + selectTag( 133 133 + userInputResult 134 134 + ? highlightedIndex === 0 135 135 + ? tagInputValue 136 136 + : filteredTags[highlightedIndex - 1].name 137 137 + : filteredTags[highlightedIndex].name, 138 138 + ); 139 139 + clearTagInput(); 140 140 + } else if (e.key === "Escape") { 141 141 + setIsOpen(false); 142 142 + } 143 143 + }; 144 144 + 145 145 + const userInputResult = 146 146 + showResults && 147 147 + tagInputValue !== "" && 148 148 + !filteredTags.some((tag) => tag.name === tagInputValue); 149 149 + 150 150 + return ( 151 151 + <div className="relative"> 152 152 + <Input 153 153 + className="input-with-border grow w-full outline-none!" 154 154 + id="placeholder-tag-search-input" 155 155 + value={tagInputValue} 156 156 + placeholder="search tags…" 157 157 + onChange={(e) => { 158 158 + setTagInputValue(e.target.value); 159 159 + setIsOpen(true); 160 160 + setHighlightedIndex(0); 161 161 + }} 162 162 + onKeyDown={handleKeyDown} 163 163 + onFocus={() => { 164 164 + setIsOpen(true); 165 165 + document.getElementById("tag-search-input")?.focus(); 166 166 + }} 167 167 + /> 168 168 + <Popover 169 169 + open={isOpen} 170 170 + onOpenChange={() => { 171 171 + setIsOpen(!isOpen); 172 172 + if (!isOpen) 173 173 + setTimeout(() => { 174 174 + document.getElementById("tag-search-input")?.focus(); 175 175 + }, 100); 176 176 + }} 177 177 + className="w-full p-2! min-w-xs text-primary" 178 178 + sideOffset={-39} 179 179 + onOpenAutoFocus={(e) => e.preventDefault()} 180 180 + asChild 181 181 + trigger={ 182 182 + <button 183 183 + ref={placeholderInputRef} 184 184 + className="absolute left-0 top-0 right-0 h-[30px]" 185 185 + ></button> 186 186 + } 187 187 + noArrow 188 188 + > 189 189 + <div className="" style={{ width: `${inputWidth}px` }}> 190 190 + <Input 191 191 + className="input-with-border grow w-full mb-2" 192 192 + id="tag-search-input" 193 193 + placeholder="search tags…" 194 194 + value={tagInputValue} 195 195 + onChange={(e) => { 196 196 + setTagInputValue(e.target.value); 197 197 + setIsOpen(true); 198 198 + setHighlightedIndex(0); 199 199 + }} 200 200 + onKeyDown={handleKeyDown} 201 201 + onFocus={() => { 202 202 + setIsOpen(true); 203 203 + }} 204 204 + /> 205 205 + {props.selectedTags.length > 0 ? ( 206 206 + <div className="flex flex-wrap gap-2 pb-[6px]"> 207 207 + {props.selectedTags.map((tag) => ( 208 208 + <Tag 209 209 + key={tag} 210 210 + name={tag} 211 211 + selected 212 212 + onDelete={() => { 213 213 + props.setSelectedTags( 214 214 + props.selectedTags.filter((t) => t !== tag), 215 215 + ); 216 216 + }} 217 217 + /> 218 218 + ))} 219 219 + </div> 220 220 + ) : ( 221 221 + <div className="text-tertiary italic text-sm h-6"> 222 222 + no tags selected 223 223 + </div> 224 224 + )} 225 225 + <hr className=" mb-[2px] border-border-light" /> 226 226 + 227 227 + {showResults ? ( 228 228 + <> 229 229 + {userInputResult && ( 230 230 + <TagResult 231 231 + key={"userInput"} 232 232 + index={0} 233 233 + name={tagInputValue} 234 234 + tagged={0} 235 235 + highlighted={0 === highlightedIndex} 236 236 + setHighlightedIndex={setHighlightedIndex} 237 237 + onSelect={() => { 238 238 + selectTag(tagInputValue); 239 239 + }} 240 240 + /> 241 241 + )} 242 242 + {filteredTags.map((tag, i) => ( 243 243 + <TagResult 244 244 + key={tag.name} 245 245 + index={userInputResult ? i + 1 : i} 246 246 + name={tag.name} 247 247 + tagged={tag.document_count} 248 248 + highlighted={ 249 249 + (userInputResult ? i + 1 : i) === highlightedIndex 250 250 + } 251 251 + setHighlightedIndex={setHighlightedIndex} 252 252 + onSelect={() => { 253 253 + selectTag(tag.name); 254 254 + }} 255 255 + /> 256 256 + ))} 257 257 + </> 258 258 + ) : ( 259 259 + <div className="text-tertiary italic text-sm py-1"> 260 260 + type at least 3 characters to search 261 261 + </div> 262 262 + )} 263 263 + </div> 264 264 + </Popover> 265 265 + </div> 266 266 + ); 267 267 + }; 268 268 + 269 269 + const TagResult = (props: { 270 270 + name: string; 271 271 + tagged: number; 272 272 + onSelect: () => void; 273 273 + index: number; 274 274 + highlighted: boolean; 275 275 + setHighlightedIndex: (i: number) => void; 276 276 + }) => { 277 277 + return ( 278 278 + <div className="-mx-1"> 279 279 + <button 280 280 + className={`w-full flex justify-between items-center text-left pr-1 pl-[6px] py-0.5 rounded-md ${props.highlighted ? "bg-border-light" : ""}`} 281 281 + onSelect={(e) => { 282 282 + e.preventDefault(); 283 283 + props.onSelect(); 284 284 + }} 285 285 + onClick={(e) => { 286 286 + e.preventDefault(); 287 287 + props.onSelect(); 288 288 + }} 289 289 + onMouseEnter={(e) => props.setHighlightedIndex(props.index)} 290 290 + > 291 291 + {props.name} 292 292 + <div className="text-tertiary text-sm"> {props.tagged}</div> 293 293 + </button> 294 294 + </div> 295 295 + ); 296 296 + };

+2 -43

components/ThemeManager/PubThemeSetter.tsx

··· 16 16 import { PubAccentPickers } from "./PubPickers/PubAcccentPickers"; 17 17 import { Separator } from "components/Layout"; 18 18 import { PubSettingsHeader } from "app/lish/[did]/[publication]/dashboard/PublicationSettings"; 19 19 + import { ColorToRGB, ColorToRGBA } from "./colorToLexicons"; 19 20 20 21 export type ImageState = { 21 22 src: string; ··· 39 40 theme: localPubTheme, 40 41 setTheme, 41 42 changes, 42 42 - } = useLocalPubTheme(record, showPageBackground); 43 43 + } = useLocalPubTheme(record?.theme, showPageBackground); 43 44 let [image, setImage] = useState<ImageState | null>( 44 45 PubLeafletThemeBackgroundImage.isMain(record?.theme?.backgroundImage) 45 46 ? { ··· 343 344 </div> 344 345 ); 345 346 }; 346 346 - 347 347 - export function ColorToRGBA(color: Color) { 348 348 - if (!color) 349 349 - return { 350 350 - $type: "pub.leaflet.theme.color#rgba" as const, 351 351 - r: 0, 352 352 - g: 0, 353 353 - b: 0, 354 354 - a: 1, 355 355 - }; 356 356 - let c = color.toFormat("rgba"); 357 357 - const r = c.getChannelValue("red"); 358 358 - const g = c.getChannelValue("green"); 359 359 - const b = c.getChannelValue("blue"); 360 360 - const a = c.getChannelValue("alpha"); 361 361 - return { 362 362 - $type: "pub.leaflet.theme.color#rgba" as const, 363 363 - r: Math.round(r), 364 364 - g: Math.round(g), 365 365 - b: Math.round(b), 366 366 - a: Math.round(a * 100), 367 367 - }; 368 368 - } 369 369 - function ColorToRGB(color: Color) { 370 370 - if (!color) 371 371 - return { 372 372 - $type: "pub.leaflet.theme.color#rgb" as const, 373 373 - r: 0, 374 374 - g: 0, 375 375 - b: 0, 376 376 - }; 377 377 - let c = color.toFormat("rgb"); 378 378 - const r = c.getChannelValue("red"); 379 379 - const g = c.getChannelValue("green"); 380 380 - const b = c.getChannelValue("blue"); 381 381 - return { 382 382 - $type: "pub.leaflet.theme.color#rgb" as const, 383 383 - r: Math.round(r), 384 384 - g: Math.round(g), 385 385 - b: Math.round(b), 386 386 - }; 387 387 - }

+39 -27

components/ThemeManager/PublicationThemeProvider.tsx

··· 2 2 import { useMemo, useState } from "react"; 3 3 import { parseColor } from "react-aria-components"; 4 4 import { useEntity } from "src/replicache"; 5 5 - import { getColorContrast } from "./ThemeProvider"; 5 5 + import { getColorContrast } from "./themeUtils"; 6 6 import { useColorAttribute, colorToString } from "./useColorAttribute"; 7 7 import { BaseThemeProvider } from "./ThemeProvider"; 8 8 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api"; ··· 16 16 accentText: "#FFFFFF", 17 17 accentBackground: "#0000FF", 18 18 }; 19 19 + 20 20 + // Default page background for standalone leaflets (matches editor default) 21 21 + const StandalonePageBackground = "#FFFFFF"; 19 22 function parseThemeColor( 20 23 c: PubLeafletThemeColor.Rgb | PubLeafletThemeColor.Rgba, 21 24 ) { ··· 26 29 } 27 30 28 31 let useColor = ( 29 29 - record: PubLeafletPublication.Record | null | undefined, 32 32 + theme: PubLeafletPublication.Record["theme"] | null | undefined, 30 33 c: keyof typeof PubThemeDefaults, 31 34 ) => { 32 35 return useMemo(() => { 33 33 - let v = record?.theme?.[c]; 36 36 + let v = theme?.[c]; 34 37 if (isColor(v)) { 35 38 return parseThemeColor(v); 36 39 } else return parseColor(PubThemeDefaults[c]); 37 37 - }, [record?.theme?.[c]]); 40 40 + }, [theme?.[c]]); 38 41 }; 39 42 let isColor = ( 40 43 c: any, ··· 53 56 return ( 54 57 <PublicationThemeProvider 55 58 pub_creator={pub?.identity_did || ""} 56 56 - record={pub?.record as PubLeafletPublication.Record} 59 59 + theme={(pub?.record as PubLeafletPublication.Record)?.theme} 57 60 > 58 61 <PublicationBackgroundProvider 59 59 - record={pub?.record as PubLeafletPublication.Record} 62 62 + theme={(pub?.record as PubLeafletPublication.Record)?.theme} 60 63 pub_creator={pub?.identity_did || ""} 61 64 > 62 65 {props.children} ··· 66 69 } 67 70 68 71 export function PublicationBackgroundProvider(props: { 69 69 - record?: PubLeafletPublication.Record | null; 72 72 + theme?: PubLeafletPublication.Record["theme"] | null; 70 73 pub_creator: string; 71 74 className?: string; 72 75 children: React.ReactNode; 73 76 }) { 74 74 - let backgroundImage = props.record?.theme?.backgroundImage?.image?.ref 75 75 - ? blobRefToSrc( 76 76 - props.record?.theme?.backgroundImage?.image?.ref, 77 77 - props.pub_creator, 78 78 - ) 77 77 + let backgroundImage = props.theme?.backgroundImage?.image?.ref 78 78 + ? blobRefToSrc(props.theme?.backgroundImage?.image?.ref, props.pub_creator) 79 79 : null; 80 80 81 81 - let backgroundImageRepeat = props.record?.theme?.backgroundImage?.repeat; 82 82 - let backgroundImageSize = props.record?.theme?.backgroundImage?.width || 500; 81 81 + let backgroundImageRepeat = props.theme?.backgroundImage?.repeat; 82 82 + let backgroundImageSize = props.theme?.backgroundImage?.width || 500; 83 83 return ( 84 84 <div 85 85 className="PubBackgroundWrapper w-full bg-bg-leaflet text-primary h-full flex flex-col bg-cover bg-center bg-no-repeat items-stretch" 86 86 style={{ 87 87 - backgroundImage: `url(${backgroundImage})`, 87 87 + backgroundImage: backgroundImage 88 88 + ? `url(${backgroundImage})` 89 89 + : undefined, 88 90 backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", 89 91 backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`, 90 92 }} ··· 96 98 export function PublicationThemeProvider(props: { 97 99 local?: boolean; 98 100 children: React.ReactNode; 99 99 - record?: PubLeafletPublication.Record | null; 101 101 + theme?: PubLeafletPublication.Record["theme"] | null; 100 102 pub_creator: string; 103 103 + isStandalone?: boolean; 101 104 }) { 102 102 - let colors = usePubTheme(props.record); 105 105 + let colors = usePubTheme(props.theme, props.isStandalone); 103 106 return ( 104 107 <BaseThemeProvider local={props.local} {...colors}> 105 108 {props.children} ··· 107 110 ); 108 111 } 109 112 110 110 - export const usePubTheme = (record?: PubLeafletPublication.Record | null) => { 111 111 - let bgLeaflet = useColor(record, "backgroundColor"); 112 112 - let bgPage = useColor(record, "pageBackground"); 113 113 - bgPage = record?.theme?.pageBackground ? bgPage : bgLeaflet; 114 114 - let showPageBackground = record?.theme?.showPageBackground; 113 113 + export const usePubTheme = ( 114 114 + theme?: PubLeafletPublication.Record["theme"] | null, 115 115 + isStandalone?: boolean, 116 116 + ) => { 117 117 + let bgLeaflet = useColor(theme, "backgroundColor"); 118 118 + let bgPage = useColor(theme, "pageBackground"); 119 119 + // For standalone documents, use the editor default page background (#FFFFFF) 120 120 + // For publications without explicit pageBackground, use bgLeaflet 121 121 + if (isStandalone && !theme?.pageBackground) { 122 122 + bgPage = parseColor(StandalonePageBackground); 123 123 + } else if (theme && !theme.pageBackground) { 124 124 + bgPage = bgLeaflet; 125 125 + } 126 126 + let showPageBackground = theme?.showPageBackground; 115 127 116 116 - let primary = useColor(record, "primary"); 128 128 + let primary = useColor(theme, "primary"); 117 129 118 118 - let accent1 = useColor(record, "accentBackground"); 119 119 - let accent2 = useColor(record, "accentText"); 130 130 + let accent1 = useColor(theme, "accentBackground"); 131 131 + let accent2 = useColor(theme, "accentText"); 120 132 121 133 let highlight1 = useEntity(null, "theme/highlight-1")?.data.value; 122 134 let highlight2 = useColorAttribute(null, "theme/highlight-2"); ··· 136 148 }; 137 149 138 150 export const useLocalPubTheme = ( 139 139 - record: PubLeafletPublication.Record | undefined, 151 151 + theme: PubLeafletPublication.Record["theme"] | undefined, 140 152 showPageBackground?: boolean, 141 153 ) => { 142 142 - const pubTheme = usePubTheme(record); 154 154 + const pubTheme = usePubTheme(theme); 143 155 const [localOverrides, setTheme] = useState<Partial<typeof pubTheme>>({}); 144 156 145 157 const mergedTheme = useMemo(() => {

+5 -42

components/ThemeManager/ThemeProvider.tsx

··· 5 5 CSSProperties, 6 6 useContext, 7 7 useEffect, 8 8 - useMemo, 9 9 - useState, 10 8 } from "react"; 11 9 import { 12 10 colorToString, ··· 14 12 useColorAttributeNullable, 15 13 } from "./useColorAttribute"; 16 14 import { Color as AriaColor, parseColor } from "react-aria-components"; 17 17 - import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn"; 18 15 19 16 import { useEntity } from "src/replicache"; 20 17 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; ··· 23 20 PublicationThemeProvider, 24 21 } from "./PublicationThemeProvider"; 25 22 import { PubLeafletPublication } from "lexicons/api"; 26 26 - 27 27 - type CSSVariables = { 28 28 - "--bg-leaflet": string; 29 29 - "--bg-page": string; 30 30 - "--primary": string; 31 31 - "--accent-1": string; 32 32 - "--accent-2": string; 33 33 - "--accent-contrast": string; 34 34 - "--highlight-1": string; 35 35 - "--highlight-2": string; 36 36 - "--highlight-3": string; 37 37 - }; 38 38 - 39 39 - // define the color defaults for everything 40 40 - export const ThemeDefaults = { 41 41 - "theme/page-background": "#FDFCFA", 42 42 - "theme/card-background": "#FFFFFF", 43 43 - "theme/primary": "#272727", 44 44 - "theme/highlight-1": "#FFFFFF", 45 45 - "theme/highlight-2": "#EDD280", 46 46 - "theme/highlight-3": "#FFCDC3", 47 47 - 48 48 - //everywhere else, accent-background = accent-1 and accent-text = accent-2. 49 49 - // we just need to create a migration pipeline before we can change this 50 50 - "theme/accent-text": "#FFFFFF", 51 51 - "theme/accent-background": "#0000FF", 52 52 - "theme/accent-contrast": "#0000FF", 53 53 - }; 23 23 + import { getColorContrast } from "./themeUtils"; 54 24 55 25 // define a function to set an Aria Color to a CSS Variable in RGB 56 26 function setCSSVariableToColor( ··· 73 43 return ( 74 44 <PublicationThemeProvider 75 45 {...props} 76 76 - record={pub.publications?.record as PubLeafletPublication.Record} 46 46 + theme={(pub.publications?.record as PubLeafletPublication.Record)?.theme} 77 47 pub_creator={pub.publications?.identity_did} 78 48 /> 79 49 ); ··· 339 309 return ( 340 310 <PublicationBackgroundProvider 341 311 pub_creator={pub?.publications.identity_did || ""} 342 342 - record={pub?.publications.record as PubLeafletPublication.Record} 312 312 + theme={ 313 313 + (pub.publications?.record as PubLeafletPublication.Record)?.theme 314 314 + } 343 315 > 344 316 {props.children} 345 317 </PublicationBackgroundProvider> ··· 366 338 ); 367 339 }; 368 340 369 369 - // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast 370 370 - export function getColorContrast(color1: string, color2: string) { 371 371 - ColorSpace.register(sRGB); 372 372 - 373 373 - let parsedColor1 = parse(`rgb(${color1})`); 374 374 - let parsedColor2 = parse(`rgb(${color2})`); 375 375 - 376 376 - return contrastLstar(parsedColor1, parsedColor2); 377 377 - }

+2 -2

components/ThemeManager/ThemeSetter.tsx

··· 70 70 }, [rep, props.entityID]); 71 71 72 72 if (!permission) return null; 73 73 - if (pub) return null; 73 73 + if (pub?.publications) return null; 74 74 75 75 return ( 76 76 <> ··· 111 111 }, [rep, props.entityID]); 112 112 113 113 if (!permission) return null; 114 114 - if (pub) return null; 114 114 + if (pub?.publications) return null; 115 115 return ( 116 116 <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar"> 117 117 <div className="themeBGLeaflet flex">

+44

components/ThemeManager/colorToLexicons.ts

··· 1 1 + import { Color } from "react-aria-components"; 2 2 + 3 3 + export function ColorToRGBA(color: Color) { 4 4 + if (!color) 5 5 + return { 6 6 + $type: "pub.leaflet.theme.color#rgba" as const, 7 7 + r: 0, 8 8 + g: 0, 9 9 + b: 0, 10 10 + a: 1, 11 11 + }; 12 12 + let c = color.toFormat("rgba"); 13 13 + const r = c.getChannelValue("red"); 14 14 + const g = c.getChannelValue("green"); 15 15 + const b = c.getChannelValue("blue"); 16 16 + const a = c.getChannelValue("alpha"); 17 17 + return { 18 18 + $type: "pub.leaflet.theme.color#rgba" as const, 19 19 + r: Math.round(r), 20 20 + g: Math.round(g), 21 21 + b: Math.round(b), 22 22 + a: Math.round(a * 100), 23 23 + }; 24 24 + } 25 25 + 26 26 + export function ColorToRGB(color: Color) { 27 27 + if (!color) 28 28 + return { 29 29 + $type: "pub.leaflet.theme.color#rgb" as const, 30 30 + r: 0, 31 31 + g: 0, 32 32 + b: 0, 33 33 + }; 34 34 + let c = color.toFormat("rgb"); 35 35 + const r = c.getChannelValue("red"); 36 36 + const g = c.getChannelValue("green"); 37 37 + const b = c.getChannelValue("blue"); 38 38 + return { 39 39 + $type: "pub.leaflet.theme.color#rgb" as const, 40 40 + r: Math.round(r), 41 41 + g: Math.round(g), 42 42 + b: Math.round(b), 43 43 + }; 44 44 + }

+27

components/ThemeManager/themeUtils.ts

··· 1 1 + import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn"; 2 2 + 3 3 + // define the color defaults for everything 4 4 + export const ThemeDefaults = { 5 5 + "theme/page-background": "#FDFCFA", 6 6 + "theme/card-background": "#FFFFFF", 7 7 + "theme/primary": "#272727", 8 8 + "theme/highlight-1": "#FFFFFF", 9 9 + "theme/highlight-2": "#EDD280", 10 10 + "theme/highlight-3": "#FFCDC3", 11 11 + 12 12 + //everywhere else, accent-background = accent-1 and accent-text = accent-2. 13 13 + // we just need to create a migration pipeline before we can change this 14 14 + "theme/accent-text": "#FFFFFF", 15 15 + "theme/accent-background": "#0000FF", 16 16 + "theme/accent-contrast": "#0000FF", 17 17 + }; 18 18 + 19 19 + // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast 20 20 + export function getColorContrast(color1: string, color2: string) { 21 21 + ColorSpace.register(sRGB); 22 22 + 23 23 + let parsedColor1 = parse(`rgb(${color1})`); 24 24 + let parsedColor2 = parse(`rgb(${color2})`); 25 25 + 26 26 + return contrastLstar(parsedColor1, parsedColor2); 27 27 + }

+1 -1

components/ThemeManager/useColorAttribute.ts

··· 2 2 import { Color, parseColor } from "react-aria-components"; 3 3 import { useEntity, useReplicache } from "src/replicache"; 4 4 import { FilterAttributes } from "src/replicache/attributes"; 5 5 - import { ThemeDefaults } from "./ThemeProvider"; 5 5 + import { ThemeDefaults } from "./themeUtils"; 6 6 7 7 export function useColorAttribute( 8 8 entity: string | null,

+5 -14

components/Toolbar/BlockToolbar.tsx

··· 2 2 import { ToolbarButton } from "."; 3 3 import { Separator, ShortcutKey } from "components/Layout"; 4 4 import { metaKey } from "src/utils/metaKey"; 5 5 - import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 6 5 import { useUIState } from "src/useUIState"; 7 6 import { LockBlockButton } from "./LockBlockButton"; 8 7 import { TextAlignmentButton } from "./TextAlignmentToolbar"; 9 8 import { ImageFullBleedButton, ImageAltTextButton } from "./ImageToolbar"; 10 9 import { DeleteSmall } from "components/Icons/DeleteSmall"; 10 10 + import { getSortedSelection } from "components/SelectionManager/selectionState"; 11 11 12 12 export const BlockToolbar = (props: { 13 13 setToolbarState: ( ··· 66 66 67 67 const MoveBlockButtons = () => { 68 68 let { rep } = useReplicache(); 69 69 - const getSortedSelection = async () => { 70 70 - let selectedBlocks = useUIState.getState().selectedBlocks; 71 71 - let siblings = 72 72 - (await rep?.query((tx) => 73 73 - getBlocksWithType(tx, selectedBlocks[0].parent), 74 74 - )) || []; 75 75 - let sortedBlocks = siblings.filter((s) => 76 76 - selectedBlocks.find((sb) => sb.value === s.value), 77 77 - ); 78 78 - return [sortedBlocks, siblings]; 79 79 - }; 80 69 return ( 81 70 <> 82 71 <ToolbarButton 83 72 hiddenOnCanvas 84 73 onClick={async () => { 85 85 - let [sortedBlocks, siblings] = await getSortedSelection(); 74 74 + if (!rep) return; 75 75 + let [sortedBlocks, siblings] = await getSortedSelection(rep); 86 76 if (sortedBlocks.length > 1) return; 87 77 let block = sortedBlocks[0]; 88 78 let previousBlock = ··· 139 129 <ToolbarButton 140 130 hiddenOnCanvas 141 131 onClick={async () => { 142 142 - let [sortedBlocks, siblings] = await getSortedSelection(); 132 132 + if (!rep) return; 133 133 + let [sortedBlocks, siblings] = await getSortedSelection(rep); 143 134 if (sortedBlocks.length > 1) return; 144 135 let block = sortedBlocks[0]; 145 136 let nextBlock = siblings

+1 -1

components/Toolbar/MultiSelectToolbar.tsx

··· 8 8 import { LockBlockButton } from "./LockBlockButton"; 9 9 import { Props } from "components/Icons/Props"; 10 10 import { TextAlignmentButton } from "./TextAlignmentToolbar"; 11 11 - import { getSortedSelection } from "components/SelectionManager"; 11 11 + import { getSortedSelection } from "components/SelectionManager/selectionState"; 12 12 13 13 export const MultiselectToolbar = (props: { 14 14 setToolbarState: (

+2 -1

components/Toolbar/index.tsx

··· 13 13 import { TextToolbar } from "./TextToolbar"; 14 14 import { BlockToolbar } from "./BlockToolbar"; 15 15 import { MultiselectToolbar } from "./MultiSelectToolbar"; 16 16 - import { AreYouSure, deleteBlock } from "components/Blocks/DeleteBlock"; 16 16 + import { AreYouSure } from "components/Blocks/DeleteBlock"; 17 17 + import { deleteBlock } from "src/utils/deleteBlock"; 17 18 import { TooltipButton } from "components/Buttons"; 18 19 import { TextAlignmentToolbar } from "./TextAlignmentToolbar"; 19 20 import { useIsMobile } from "src/hooks/isMobile";

+1 -1

components/utils/UpdateLeafletTitle.tsx

··· 8 8 import { useEntity, useReplicache } from "src/replicache"; 9 9 import * as Y from "yjs"; 10 10 import * as base64 from "base64-js"; 11 11 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 11 11 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 12 12 import { useParams, useRouter, useSearchParams } from "next/navigation"; 13 13 import { focusBlock } from "src/utils/focusBlock"; 14 14 import { useIsMobile } from "src/hooks/isMobile";

+1 -1

feeds/index.ts

··· 92 92 .from("documents") 93 93 .select( 94 94 `*, 95 95 - documents_in_publications!inner(publications!inner(*))`, 95 95 + documents_in_publications(publications(*))`, 96 96 ) 97 97 .or( 98 98 "record->preferences->showInDiscover.is.null,record->preferences->>showInDiscover.eq.true",

+36 -1

lexicons/api/lexicons.ts

··· 1408 1408 description: 'Record containing a document', 1409 1409 record: { 1410 1410 type: 'object', 1411 1411 - required: ['pages', 'author', 'title', 'publication'], 1411 1411 + required: ['pages', 'author', 'title'], 1412 1412 properties: { 1413 1413 title: { 1414 1414 type: 'string', ··· 1435 1435 author: { 1436 1436 type: 'string', 1437 1437 format: 'at-identifier', 1438 1438 + }, 1439 1439 + theme: { 1440 1440 + type: 'ref', 1441 1441 + ref: 'lex:pub.leaflet.publication#theme', 1442 1442 + }, 1443 1443 + tags: { 1444 1444 + type: 'array', 1445 1445 + items: { 1446 1446 + type: 'string', 1447 1447 + maxLength: 50, 1448 1448 + }, 1438 1449 }, 1439 1450 pages: { 1440 1451 type: 'array', ··· 1861 1872 type: 'union', 1862 1873 refs: [ 1863 1874 'lex:pub.leaflet.richtext.facet#link', 1875 1875 + 'lex:pub.leaflet.richtext.facet#didMention', 1876 1876 + 'lex:pub.leaflet.richtext.facet#atMention', 1864 1877 'lex:pub.leaflet.richtext.facet#code', 1865 1878 'lex:pub.leaflet.richtext.facet#highlight', 1866 1879 'lex:pub.leaflet.richtext.facet#underline', ··· 1897 1910 properties: { 1898 1911 uri: { 1899 1912 type: 'string', 1913 1913 + }, 1914 1914 + }, 1915 1915 + }, 1916 1916 + didMention: { 1917 1917 + type: 'object', 1918 1918 + description: 'Facet feature for mentioning a did.', 1919 1919 + required: ['did'], 1920 1920 + properties: { 1921 1921 + did: { 1922 1922 + type: 'string', 1923 1923 + format: 'did', 1924 1924 + }, 1925 1925 + }, 1926 1926 + }, 1927 1927 + atMention: { 1928 1928 + type: 'object', 1929 1929 + description: 'Facet feature for mentioning an AT URI.', 1930 1930 + required: ['atURI'], 1931 1931 + properties: { 1932 1932 + atURI: { 1933 1933 + type: 'string', 1934 1934 + format: 'uri', 1900 1935 }, 1901 1936 }, 1902 1937 },

+4 -1

lexicons/api/types/pub/leaflet/document.ts

··· 6 6 import { validate as _validate } from '../../../lexicons' 7 7 import { type $Typed, is$typed as _is$typed, type OmitKey } from '../../../util' 8 8 import type * as ComAtprotoRepoStrongRef from '../../com/atproto/repo/strongRef' 9 9 + import type * as PubLeafletPublication from './publication' 9 10 import type * as PubLeafletPagesLinearDocument from './pages/linearDocument' 10 11 import type * as PubLeafletPagesCanvas from './pages/canvas' 11 12 ··· 19 20 postRef?: ComAtprotoRepoStrongRef.Main 20 21 description?: string 21 22 publishedAt?: string 22 22 - publication: string 23 23 + publication?: string 23 24 author: string 25 25 + theme?: PubLeafletPublication.Theme 26 26 + tags?: string[] 24 27 pages: ( 25 28 | $Typed<PubLeafletPagesLinearDocument.Main> 26 29 | $Typed<PubLeafletPagesCanvas.Main>

+34

lexicons/api/types/pub/leaflet/richtext/facet.ts

··· 20 20 index: ByteSlice 21 21 features: ( 22 22 | $Typed<Link> 23 23 + | $Typed<DidMention> 24 24 + | $Typed<AtMention> 23 25 | $Typed<Code> 24 26 | $Typed<Highlight> 25 27 | $Typed<Underline> ··· 72 74 73 75 export function validateLink<V>(v: V) { 74 76 return validate<Link & V>(v, id, hashLink) 77 77 + } 78 78 + 79 79 + /** Facet feature for mentioning a did. */ 80 80 + export interface DidMention { 81 81 + $type?: 'pub.leaflet.richtext.facet#didMention' 82 82 + did: string 83 83 + } 84 84 + 85 85 + const hashDidMention = 'didMention' 86 86 + 87 87 + export function isDidMention<V>(v: V) { 88 88 + return is$typed(v, id, hashDidMention) 89 89 + } 90 90 + 91 91 + export function validateDidMention<V>(v: V) { 92 92 + return validate<DidMention & V>(v, id, hashDidMention) 93 93 + } 94 94 + 95 95 + /** Facet feature for mentioning an AT URI. */ 96 96 + export interface AtMention { 97 97 + $type?: 'pub.leaflet.richtext.facet#atMention' 98 98 + atURI: string 99 99 + } 100 100 + 101 101 + const hashAtMention = 'atMention' 102 102 + 103 103 + export function isAtMention<V>(v: V) { 104 104 + return is$typed(v, id, hashAtMention) 105 105 + } 106 106 + 107 107 + export function validateAtMention<V>(v: V) { 108 108 + return validate<AtMention & V>(v, id, hashAtMention) 75 109 } 76 110 77 111 /** Facet feature for inline code. */

+12 -2

lexicons/pub/leaflet/document.json

··· 13 13 "required": [ 14 14 "pages", 15 15 "author", 16 16 - "title", 17 17 - "publication" 16 16 + "title" 18 17 ], 19 18 "properties": { 20 19 "title": { ··· 42 41 "author": { 43 42 "type": "string", 44 43 "format": "at-identifier" 44 44 + }, 45 45 + "theme": { 46 46 + "type": "ref", 47 47 + "ref": "pub.leaflet.publication#theme" 48 48 + }, 49 49 + "tags": { 50 50 + "type": "array", 51 51 + "items": { 52 52 + "type": "string", 53 53 + "maxLength": 50 54 54 + } 45 55 }, 46 56 "pages": { 47 57 "type": "array",

+28

lexicons/pub/leaflet/richtext/facet.json

··· 20 20 "type": "union", 21 21 "refs": [ 22 22 "#link", 23 23 + "#didMention", 24 24 + "#atMention", 23 25 "#code", 24 26 "#highlight", 25 27 "#underline", ··· 59 61 "properties": { 60 62 "uri": { 61 63 "type": "string" 64 64 + } 65 65 + } 66 66 + }, 67 67 + "didMention": { 68 68 + "type": "object", 69 69 + "description": "Facet feature for mentioning a did.", 70 70 + "required": [ 71 71 + "did" 72 72 + ], 73 73 + "properties": { 74 74 + "did": { 75 75 + "type": "string", 76 76 + "format": "did" 77 77 + } 78 78 + } 79 79 + }, 80 80 + "atMention": { 81 81 + "type": "object", 82 82 + "description": "Facet feature for mentioning an AT URI.", 83 83 + "required": [ 84 84 + "atURI" 85 85 + ], 86 86 + "properties": { 87 87 + "atURI": { 88 88 + "type": "string", 89 89 + "format": "uri" 62 90 } 63 91 } 64 92 },

+3 -1

lexicons/src/document.ts

··· 14 14 description: "Record containing a document", 15 15 record: { 16 16 type: "object", 17 17 - required: ["pages", "author", "title", "publication"], 17 17 + required: ["pages", "author", "title"], 18 18 properties: { 19 19 title: { type: "string", maxLength: 1280, maxGraphemes: 128 }, 20 20 postRef: { type: "ref", ref: "com.atproto.repo.strongRef" }, ··· 22 22 publishedAt: { type: "string", format: "datetime" }, 23 23 publication: { type: "string", format: "at-uri" }, 24 24 author: { type: "string", format: "at-identifier" }, 25 25 + theme: { type: "ref", ref: "pub.leaflet.publication#theme" }, 26 26 + tags: { type: "array", items: { type: "string", maxLength: 50 } }, 25 27 pages: { 26 28 type: "array", 27 29 items: {

+12

lexicons/src/facet.ts

··· 9 9 uri: { type: "string" }, 10 10 }, 11 11 }, 12 12 + didMention: { 13 13 + type: "object", 14 14 + description: "Facet feature for mentioning a did.", 15 15 + required: ["did"], 16 16 + properties: { did: { type: "string", format: "did" } }, 17 17 + }, 18 18 + atMention: { 19 19 + type: "object", 20 20 + description: "Facet feature for mentioning an AT URI.", 21 21 + required: ["atURI"], 22 22 + properties: { atURI: { type: "string", format: "uri" } }, 23 23 + }, 12 24 code: { 13 25 type: "object", 14 26 description: "Facet feature for inline code.",

+1 -1

next-env.d.ts

··· 1 1 /// <reference types="next" /> 2 2 /// <reference types="next/image-types/global" /> 3 3 - /// <reference path="./.next/types/routes.d.ts" /> 3 3 + import "./.next/dev/types/routes.d.ts"; 4 4 5 5 // NOTE: This file should not be edited 6 6 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

+68 -49

package-lock.json

··· 48 48 "inngest": "^3.40.1", 49 49 "ioredis": "^5.6.1", 50 50 "katex": "^0.16.22", 51 51 + "l": "^0.6.0", 51 52 "linkifyjs": "^4.2.0", 52 53 "luxon": "^3.7.2", 53 54 "multiformats": "^13.3.2", 54 54 - "next": "16.0.3", 55 55 + "next": "^16.0.7", 55 56 "pg": "^8.16.3", 56 57 "prosemirror-commands": "^1.5.2", 57 58 "prosemirror-inputrules": "^1.4.0", ··· 59 60 "prosemirror-model": "^1.21.0", 60 61 "prosemirror-schema-basic": "^1.2.2", 61 62 "prosemirror-state": "^1.4.3", 62 62 - "react": "19.2.0", 63 63 + "react": "19.2.1", 63 64 "react-aria-components": "^1.8.0", 64 65 "react-day-picker": "^9.3.0", 65 65 - "react-dom": "19.2.0", 66 66 + "react-dom": "19.2.1", 66 67 "react-use-measure": "^2.1.1", 67 68 "redlock": "^5.0.0-beta.2", 68 69 "rehype-parse": "^9.0.0", ··· 2734 2735 } 2735 2736 }, 2736 2737 "node_modules/@next/env": { 2737 2737 - "version": "16.0.3", 2738 2738 - "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.3.tgz", 2739 2739 - "integrity": "sha512-IqgtY5Vwsm14mm/nmQaRMmywCU+yyMIYfk3/MHZ2ZTJvwVbBn3usZnjMi1GacrMVzVcAxJShTCpZlPs26EdEjQ==" 2738 2738 + "version": "16.0.7", 2739 2739 + "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.7.tgz", 2740 2740 + "integrity": "sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==", 2741 2741 + "license": "MIT" 2740 2742 }, 2741 2743 "node_modules/@next/eslint-plugin-next": { 2742 2744 "version": "16.0.3", ··· 2804 2806 } 2805 2807 }, 2806 2808 "node_modules/@next/swc-darwin-arm64": { 2807 2807 - "version": "16.0.3", 2808 2808 - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.3.tgz", 2809 2809 - "integrity": "sha512-MOnbd92+OByu0p6QBAzq1ahVWzF6nyfiH07dQDez4/Nku7G249NjxDVyEfVhz8WkLiOEU+KFVnqtgcsfP2nLXg==", 2809 2809 + "version": "16.0.7", 2810 2810 + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.7.tgz", 2811 2811 + "integrity": "sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==", 2810 2812 "cpu": [ 2811 2813 "arm64" 2812 2814 ], 2815 2815 + "license": "MIT", 2813 2816 "optional": true, 2814 2817 "os": [ 2815 2818 "darwin" ··· 2819 2822 } 2820 2823 }, 2821 2824 "node_modules/@next/swc-darwin-x64": { 2822 2822 - "version": "16.0.3", 2823 2823 - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.3.tgz", 2824 2824 - "integrity": "sha512-i70C4O1VmbTivYdRlk+5lj9xRc2BlK3oUikt3yJeHT1unL4LsNtN7UiOhVanFdc7vDAgZn1tV/9mQwMkWOJvHg==", 2825 2825 + "version": "16.0.7", 2826 2826 + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.7.tgz", 2827 2827 + "integrity": "sha512-rtZ7BhnVvO1ICf3QzfW9H3aPz7GhBrnSIMZyr4Qy6boXF0b5E3QLs+cvJmg3PsTCG2M1PBoC+DANUi4wCOKXpA==", 2825 2828 "cpu": [ 2826 2829 "x64" 2827 2830 ], 2831 2831 + "license": "MIT", 2828 2832 "optional": true, 2829 2833 "os": [ 2830 2834 "darwin" ··· 2834 2838 } 2835 2839 }, 2836 2840 "node_modules/@next/swc-linux-arm64-gnu": { 2837 2837 - "version": "16.0.3", 2838 2838 - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.3.tgz", 2839 2839 - "integrity": "sha512-O88gCZ95sScwD00mn/AtalyCoykhhlokxH/wi1huFK+rmiP5LAYVs/i2ruk7xST6SuXN4NI5y4Xf5vepb2jf6A==", 2841 2841 + "version": "16.0.7", 2842 2842 + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.7.tgz", 2843 2843 + "integrity": "sha512-mloD5WcPIeIeeZqAIP5c2kdaTa6StwP4/2EGy1mUw8HiexSHGK/jcM7lFuS3u3i2zn+xH9+wXJs6njO7VrAqww==", 2840 2844 "cpu": [ 2841 2845 "arm64" 2842 2846 ], 2847 2847 + "license": "MIT", 2843 2848 "optional": true, 2844 2849 "os": [ 2845 2850 "linux" ··· 2849 2854 } 2850 2855 }, 2851 2856 "node_modules/@next/swc-linux-arm64-musl": { 2852 2852 - "version": "16.0.3", 2853 2853 - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.3.tgz", 2854 2854 - "integrity": "sha512-CEErFt78S/zYXzFIiv18iQCbRbLgBluS8z1TNDQoyPi8/Jr5qhR3e8XHAIxVxPBjDbEMITprqELVc5KTfFj0gg==", 2857 2857 + "version": "16.0.7", 2858 2858 + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.7.tgz", 2859 2859 + "integrity": "sha512-+ksWNrZrthisXuo9gd1XnjHRowCbMtl/YgMpbRvFeDEqEBd523YHPWpBuDjomod88U8Xliw5DHhekBC3EOOd9g==", 2855 2860 "cpu": [ 2856 2861 "arm64" 2857 2862 ], 2863 2863 + "license": "MIT", 2858 2864 "optional": true, 2859 2865 "os": [ 2860 2866 "linux" ··· 2864 2870 } 2865 2871 }, 2866 2872 "node_modules/@next/swc-linux-x64-gnu": { 2867 2867 - "version": "16.0.3", 2868 2868 - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.3.tgz", 2869 2869 - "integrity": "sha512-Tc3i+nwt6mQ+Dwzcri/WNDj56iWdycGVh5YwwklleClzPzz7UpfaMw1ci7bLl6GRYMXhWDBfe707EXNjKtiswQ==", 2873 2873 + "version": "16.0.7", 2874 2874 + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.7.tgz", 2875 2875 + "integrity": "sha512-4WtJU5cRDxpEE44Ana2Xro1284hnyVpBb62lIpU5k85D8xXxatT+rXxBgPkc7C1XwkZMWpK5rXLXTh9PFipWsA==", 2870 2876 "cpu": [ 2871 2877 "x64" 2872 2878 ], 2879 2879 + "license": "MIT", 2873 2880 "optional": true, 2874 2881 "os": [ 2875 2882 "linux" ··· 2879 2886 } 2880 2887 }, 2881 2888 "node_modules/@next/swc-linux-x64-musl": { 2882 2882 - "version": "16.0.3", 2883 2883 - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.3.tgz", 2884 2884 - "integrity": "sha512-zTh03Z/5PBBPdTurgEtr6nY0vI9KR9Ifp/jZCcHlODzwVOEKcKRBtQIGrkc7izFgOMuXDEJBmirwpGqdM/ZixA==", 2889 2889 + "version": "16.0.7", 2890 2890 + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.7.tgz", 2891 2891 + "integrity": "sha512-HYlhqIP6kBPXalW2dbMTSuB4+8fe+j9juyxwfMwCe9kQPPeiyFn7NMjNfoFOfJ2eXkeQsoUGXg+O2SE3m4Qg2w==", 2885 2892 "cpu": [ 2886 2893 "x64" 2887 2894 ], 2895 2895 + "license": "MIT", 2888 2896 "optional": true, 2889 2897 "os": [ 2890 2898 "linux" ··· 2894 2902 } 2895 2903 }, 2896 2904 "node_modules/@next/swc-win32-arm64-msvc": { 2897 2897 - "version": "16.0.3", 2898 2898 - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.3.tgz", 2899 2899 - "integrity": "sha512-Jc1EHxtZovcJcg5zU43X3tuqzl/sS+CmLgjRP28ZT4vk869Ncm2NoF8qSTaL99gh6uOzgM99Shct06pSO6kA6g==", 2905 2905 + "version": "16.0.7", 2906 2906 + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.7.tgz", 2907 2907 + "integrity": "sha512-EviG+43iOoBRZg9deGauXExjRphhuYmIOJ12b9sAPy0eQ6iwcPxfED2asb/s2/yiLYOdm37kPaiZu8uXSYPs0Q==", 2900 2908 "cpu": [ 2901 2909 "arm64" 2902 2910 ], 2911 2911 + "license": "MIT", 2903 2912 "optional": true, 2904 2913 "os": [ 2905 2914 "win32" ··· 2909 2918 } 2910 2919 }, 2911 2920 "node_modules/@next/swc-win32-x64-msvc": { 2912 2912 - "version": "16.0.3", 2913 2913 - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.3.tgz", 2914 2914 - "integrity": "sha512-N7EJ6zbxgIYpI/sWNzpVKRMbfEGgsWuOIvzkML7wxAAZhPk1Msxuo/JDu1PKjWGrAoOLaZcIX5s+/pF5LIbBBg==", 2921 2921 + "version": "16.0.7", 2922 2922 + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.7.tgz", 2923 2923 + "integrity": "sha512-gniPjy55zp5Eg0896qSrf3yB1dw4F/3s8VK1ephdsZZ129j2n6e1WqCbE2YgcKhW9hPB9TVZENugquWJD5x0ug==", 2915 2924 "cpu": [ 2916 2925 "x64" 2917 2926 ], 2927 2927 + "license": "MIT", 2918 2928 "optional": true, 2919 2929 "os": [ 2920 2930 "win32" ··· 13360 13370 "json-buffer": "3.0.1" 13361 13371 } 13362 13372 }, 13373 13373 + "node_modules/l": { 13374 13374 + "version": "0.6.0", 13375 13375 + "resolved": "https://registry.npmjs.org/l/-/l-0.6.0.tgz", 13376 13376 + "integrity": "sha512-rB5disIyfKRBQ1xcedByHCcAmPWy2NPnjWo5u4mVVIPtathROHyfHjkloqSBT49mLnSRnupkpoIUOFCL7irCVQ==", 13377 13377 + "license": "MIT" 13378 13378 + }, 13363 13379 "node_modules/language-subtag-registry": { 13364 13380 "version": "0.3.23", 13365 13381 "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz", ··· 15108 15124 } 15109 15125 }, 15110 15126 "node_modules/next": { 15111 15111 - "version": "16.0.3", 15112 15112 - "resolved": "https://registry.npmjs.org/next/-/next-16.0.3.tgz", 15113 15113 - "integrity": "sha512-Ka0/iNBblPFcIubTA1Jjh6gvwqfjrGq1Y2MTI5lbjeLIAfmC+p5bQmojpRZqgHHVu5cG4+qdIiwXiBSm/8lZ3w==", 15127 15127 + "version": "16.0.7", 15128 15128 + "resolved": "https://registry.npmjs.org/next/-/next-16.0.7.tgz", 15129 15129 + "integrity": "sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==", 15130 15130 + "license": "MIT", 15114 15131 "dependencies": { 15115 15115 - "@next/env": "16.0.3", 15132 15132 + "@next/env": "16.0.7", 15116 15133 "@swc/helpers": "0.5.15", 15117 15134 "caniuse-lite": "^1.0.30001579", 15118 15135 "postcss": "8.4.31", ··· 15125 15142 "node": ">=20.9.0" 15126 15143 }, 15127 15144 "optionalDependencies": { 15128 15128 - "@next/swc-darwin-arm64": "16.0.3", 15129 15129 - "@next/swc-darwin-x64": "16.0.3", 15130 15130 - "@next/swc-linux-arm64-gnu": "16.0.3", 15131 15131 - "@next/swc-linux-arm64-musl": "16.0.3", 15132 15132 - "@next/swc-linux-x64-gnu": "16.0.3", 15133 15133 - "@next/swc-linux-x64-musl": "16.0.3", 15134 15134 - "@next/swc-win32-arm64-msvc": "16.0.3", 15135 15135 - "@next/swc-win32-x64-msvc": "16.0.3", 15145 15145 + "@next/swc-darwin-arm64": "16.0.7", 15146 15146 + "@next/swc-darwin-x64": "16.0.7", 15147 15147 + "@next/swc-linux-arm64-gnu": "16.0.7", 15148 15148 + "@next/swc-linux-arm64-musl": "16.0.7", 15149 15149 + "@next/swc-linux-x64-gnu": "16.0.7", 15150 15150 + "@next/swc-linux-x64-musl": "16.0.7", 15151 15151 + "@next/swc-win32-arm64-msvc": "16.0.7", 15152 15152 + "@next/swc-win32-x64-msvc": "16.0.7", 15136 15153 "sharp": "^0.34.4" 15137 15154 }, 15138 15155 "peerDependencies": { ··· 16321 16338 } 16322 16339 }, 16323 16340 "node_modules/react": { 16324 16324 - "version": "19.2.0", 16325 16325 - "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", 16326 16326 - "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", 16341 16341 + "version": "19.2.1", 16342 16342 + "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz", 16343 16343 + "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==", 16344 16344 + "license": "MIT", 16327 16345 "engines": { 16328 16346 "node": ">=0.10.0" 16329 16347 } ··· 16442 16460 } 16443 16461 }, 16444 16462 "node_modules/react-dom": { 16445 16445 - "version": "19.2.0", 16446 16446 - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", 16447 16447 - "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", 16463 16463 + "version": "19.2.1", 16464 16464 + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz", 16465 16465 + "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==", 16466 16466 + "license": "MIT", 16448 16467 "dependencies": { 16449 16468 "scheduler": "^0.27.0" 16450 16469 }, 16451 16470 "peerDependencies": { 16452 16452 - "react": "^19.2.0" 16471 16471 + "react": "^19.2.1" 16453 16472 } 16454 16473 }, 16455 16474 "node_modules/react-is": {

+4 -3

package.json

··· 58 58 "inngest": "^3.40.1", 59 59 "ioredis": "^5.6.1", 60 60 "katex": "^0.16.22", 61 61 + "l": "^0.6.0", 61 62 "linkifyjs": "^4.2.0", 62 63 "luxon": "^3.7.2", 63 64 "multiformats": "^13.3.2", 64 64 - "next": "16.0.3", 65 65 + "next": "^16.0.7", 65 66 "pg": "^8.16.3", 66 67 "prosemirror-commands": "^1.5.2", 67 68 "prosemirror-inputrules": "^1.4.0", ··· 69 70 "prosemirror-model": "^1.21.0", 70 71 "prosemirror-schema-basic": "^1.2.2", 71 72 "prosemirror-state": "^1.4.3", 72 72 - "react": "19.2.0", 73 73 + "react": "19.2.1", 73 74 "react-aria-components": "^1.8.0", 74 75 "react-day-picker": "^9.3.0", 75 75 - "react-dom": "19.2.0", 76 76 + "react-dom": "19.2.1", 76 77 "react-use-measure": "^2.1.1", 77 78 "redlock": "^5.0.0-beta.2", 78 79 "rehype-parse": "^9.0.0",

+3 -1

src/hooks/useLocalizedDate.ts

··· 28 28 29 29 // On initial page load, use header timezone. After hydration, use system timezone 30 30 const effectiveTimezone = !hasPageLoaded 31 31 - ? timezone 31 31 + ? timezone || "UTC" 32 32 : Intl.DateTimeFormat().resolvedOptions().timeZone; 33 33 + 34 34 + console.log("tz", effectiveTimezone); 33 35 34 36 // Apply timezone if available 35 37 if (effectiveTimezone) {

+4 -3

src/hooks/usePreserveScroll.ts

··· 6 6 useEffect(() => { 7 7 if (!ref.current || !key) return; 8 8 9 9 - window.requestAnimationFrame(() => { 10 10 - ref.current?.scrollTo({ top: scrollPositions[key] || 0 }); 11 11 - }); 9 9 + if (scrollPositions[key] !== undefined) 10 10 + window.requestAnimationFrame(() => { 11 11 + ref.current?.scrollTo({ top: scrollPositions[key] || 0 }); 12 12 + }); 12 13 13 14 const listener = () => { 14 15 if (!ref.current?.scrollTop) return;

+287 -27

src/notifications.ts

··· 2 2 3 3 import { supabaseServerClient } from "supabase/serverClient"; 4 4 import { Tables, TablesInsert } from "supabase/database.types"; 5 5 + import { AtUri } from "@atproto/syntax"; 6 6 + import { idResolver } from "app/(home-pages)/reader/idResolver"; 5 7 6 8 type NotificationRow = Tables<"notifications">; 7 9 ··· 11 13 12 14 export type NotificationData = 13 15 | { type: "comment"; comment_uri: string; parent_uri?: string } 14 14 - | { type: "subscribe"; subscription_uri: string }; 16 16 + | { type: "subscribe"; subscription_uri: string } 17 17 + | { type: "quote"; bsky_post_uri: string; document_uri: string } 18 18 + | { type: "mention"; document_uri: string; mention_type: "did" } 19 19 + | { type: "mention"; document_uri: string; mention_type: "publication"; mentioned_uri: string } 20 20 + | { type: "mention"; document_uri: string; mention_type: "document"; mentioned_uri: string } 21 21 + | { type: "comment_mention"; comment_uri: string; mention_type: "did" } 22 22 + | { type: "comment_mention"; comment_uri: string; mention_type: "publication"; mentioned_uri: string } 23 23 + | { type: "comment_mention"; comment_uri: string; mention_type: "document"; mentioned_uri: string }; 15 24 16 25 export type HydratedNotification = 17 26 | HydratedCommentNotification 18 18 - | HydratedSubscribeNotification; 27 27 + | HydratedSubscribeNotification 28 28 + | HydratedQuoteNotification 29 29 + | HydratedMentionNotification 30 30 + | HydratedCommentMentionNotification; 19 31 export async function hydrateNotifications( 20 32 notifications: NotificationRow[], 21 33 ): Promise<Array<HydratedNotification>> { 22 34 // Call all hydrators in parallel 23 23 - const [commentNotifications, subscribeNotifications] = await Promise.all([ 35 35 + const [commentNotifications, subscribeNotifications, quoteNotifications, mentionNotifications, commentMentionNotifications] = await Promise.all([ 24 36 hydrateCommentNotifications(notifications), 25 37 hydrateSubscribeNotifications(notifications), 38 38 + hydrateQuoteNotifications(notifications), 39 39 + hydrateMentionNotifications(notifications), 40 40 + hydrateCommentMentionNotifications(notifications), 26 41 ]); 27 42 28 43 // Combine all hydrated notifications 29 29 - const allHydrated = [...commentNotifications, ...subscribeNotifications]; 44 44 + const allHydrated = [...commentNotifications, ...subscribeNotifications, ...quoteNotifications, ...mentionNotifications, ...commentMentionNotifications]; 30 45 31 46 // Sort by created_at to maintain order 32 47 allHydrated.sort( ··· 70 85 ) 71 86 .in("uri", commentUris); 72 87 73 73 - return commentNotifications.map((notification) => ({ 74 74 - id: notification.id, 75 75 - recipient: notification.recipient, 76 76 - created_at: notification.created_at, 77 77 - type: "comment" as const, 78 78 - comment_uri: notification.data.comment_uri, 79 79 - parentData: notification.data.parent_uri 80 80 - ? comments?.find((c) => c.uri === notification.data.parent_uri)! 81 81 - : undefined, 82 82 - commentData: comments?.find( 83 83 - (c) => c.uri === notification.data.comment_uri, 84 84 - )!, 85 85 - })); 88 88 + return commentNotifications 89 89 + .map((notification) => { 90 90 + const commentData = comments?.find((c) => c.uri === notification.data.comment_uri); 91 91 + if (!commentData) return null; 92 92 + return { 93 93 + id: notification.id, 94 94 + recipient: notification.recipient, 95 95 + created_at: notification.created_at, 96 96 + type: "comment" as const, 97 97 + comment_uri: notification.data.comment_uri, 98 98 + parentData: notification.data.parent_uri 99 99 + ? comments?.find((c) => c.uri === notification.data.parent_uri) 100 100 + : undefined, 101 101 + commentData, 102 102 + }; 103 103 + }) 104 104 + .filter((n) => n !== null); 86 105 } 87 106 88 107 export type HydratedSubscribeNotification = Awaited< ··· 110 129 .select("*, identities(bsky_profiles(*)), publications(*)") 111 130 .in("uri", subscriptionUris); 112 131 113 113 - return subscribeNotifications.map((notification) => ({ 114 114 - id: notification.id, 115 115 - recipient: notification.recipient, 116 116 - created_at: notification.created_at, 117 117 - type: "subscribe" as const, 118 118 - subscription_uri: notification.data.subscription_uri, 119 119 - subscriptionData: subscriptions?.find( 120 120 - (s) => s.uri === notification.data.subscription_uri, 121 121 - )!, 122 122 - })); 132 132 + return subscribeNotifications 133 133 + .map((notification) => { 134 134 + const subscriptionData = subscriptions?.find((s) => s.uri === notification.data.subscription_uri); 135 135 + if (!subscriptionData) return null; 136 136 + return { 137 137 + id: notification.id, 138 138 + recipient: notification.recipient, 139 139 + created_at: notification.created_at, 140 140 + type: "subscribe" as const, 141 141 + subscription_uri: notification.data.subscription_uri, 142 142 + subscriptionData, 143 143 + }; 144 144 + }) 145 145 + .filter((n) => n !== null); 146 146 + } 147 147 + 148 148 + export type HydratedQuoteNotification = Awaited< 149 149 + ReturnType<typeof hydrateQuoteNotifications> 150 150 + >[0]; 151 151 + 152 152 + async function hydrateQuoteNotifications(notifications: NotificationRow[]) { 153 153 + const quoteNotifications = notifications.filter( 154 154 + (n): n is NotificationRow & { data: ExtractNotificationType<"quote"> } => 155 155 + (n.data as NotificationData)?.type === "quote", 156 156 + ); 157 157 + 158 158 + if (quoteNotifications.length === 0) { 159 159 + return []; 160 160 + } 161 161 + 162 162 + // Fetch bsky post data and document data 163 163 + const bskyPostUris = quoteNotifications.map((n) => n.data.bsky_post_uri); 164 164 + const documentUris = quoteNotifications.map((n) => n.data.document_uri); 165 165 + 166 166 + const { data: bskyPosts } = await supabaseServerClient 167 167 + .from("bsky_posts") 168 168 + .select("*") 169 169 + .in("uri", bskyPostUris); 170 170 + 171 171 + const { data: documents } = await supabaseServerClient 172 172 + .from("documents") 173 173 + .select("*, documents_in_publications(publications(*))") 174 174 + .in("uri", documentUris); 175 175 + 176 176 + return quoteNotifications 177 177 + .map((notification) => { 178 178 + const bskyPost = bskyPosts?.find((p) => p.uri === notification.data.bsky_post_uri); 179 179 + const document = documents?.find((d) => d.uri === notification.data.document_uri); 180 180 + if (!bskyPost || !document) return null; 181 181 + return { 182 182 + id: notification.id, 183 183 + recipient: notification.recipient, 184 184 + created_at: notification.created_at, 185 185 + type: "quote" as const, 186 186 + bsky_post_uri: notification.data.bsky_post_uri, 187 187 + document_uri: notification.data.document_uri, 188 188 + bskyPost, 189 189 + document, 190 190 + }; 191 191 + }) 192 192 + .filter((n) => n !== null); 193 193 + } 194 194 + 195 195 + export type HydratedMentionNotification = Awaited< 196 196 + ReturnType<typeof hydrateMentionNotifications> 197 197 + >[0]; 198 198 + 199 199 + async function hydrateMentionNotifications(notifications: NotificationRow[]) { 200 200 + const mentionNotifications = notifications.filter( 201 201 + (n): n is NotificationRow & { data: ExtractNotificationType<"mention"> } => 202 202 + (n.data as NotificationData)?.type === "mention", 203 203 + ); 204 204 + 205 205 + if (mentionNotifications.length === 0) { 206 206 + return []; 207 207 + } 208 208 + 209 209 + // Fetch document data from the database 210 210 + const documentUris = mentionNotifications.map((n) => n.data.document_uri); 211 211 + const { data: documents } = await supabaseServerClient 212 212 + .from("documents") 213 213 + .select("*, documents_in_publications(publications(*))") 214 214 + .in("uri", documentUris); 215 215 + 216 216 + // Extract unique DIDs from document URIs to resolve handles 217 217 + const documentCreatorDids = [...new Set(documentUris.map((uri) => new AtUri(uri).host))]; 218 218 + 219 219 + // Resolve DIDs to handles in parallel 220 220 + const didToHandleMap = new Map<string, string | null>(); 221 221 + await Promise.all( 222 222 + documentCreatorDids.map(async (did) => { 223 223 + try { 224 224 + const resolved = await idResolver.did.resolve(did); 225 225 + const handle = resolved?.alsoKnownAs?.[0] 226 226 + ? resolved.alsoKnownAs[0].slice(5) // Remove "at://" prefix 227 227 + : null; 228 228 + didToHandleMap.set(did, handle); 229 229 + } catch (error) { 230 230 + console.error(`Failed to resolve DID ${did}:`, error); 231 231 + didToHandleMap.set(did, null); 232 232 + } 233 233 + }), 234 234 + ); 235 235 + 236 236 + // Fetch mentioned publications and documents 237 237 + const mentionedPublicationUris = mentionNotifications 238 238 + .filter((n) => n.data.mention_type === "publication") 239 239 + .map((n) => (n.data as Extract<ExtractNotificationType<"mention">, { mention_type: "publication" }>).mentioned_uri); 240 240 + 241 241 + const mentionedDocumentUris = mentionNotifications 242 242 + .filter((n) => n.data.mention_type === "document") 243 243 + .map((n) => (n.data as Extract<ExtractNotificationType<"mention">, { mention_type: "document" }>).mentioned_uri); 244 244 + 245 245 + const [{ data: mentionedPublications }, { data: mentionedDocuments }] = await Promise.all([ 246 246 + mentionedPublicationUris.length > 0 247 247 + ? supabaseServerClient 248 248 + .from("publications") 249 249 + .select("*") 250 250 + .in("uri", mentionedPublicationUris) 251 251 + : Promise.resolve({ data: [] }), 252 252 + mentionedDocumentUris.length > 0 253 253 + ? supabaseServerClient 254 254 + .from("documents") 255 255 + .select("*, documents_in_publications(publications(*))") 256 256 + .in("uri", mentionedDocumentUris) 257 257 + : Promise.resolve({ data: [] }), 258 258 + ]); 259 259 + 260 260 + return mentionNotifications 261 261 + .map((notification) => { 262 262 + const document = documents?.find((d) => d.uri === notification.data.document_uri); 263 263 + if (!document) return null; 264 264 + 265 265 + const mentionedUri = notification.data.mention_type !== "did" 266 266 + ? (notification.data as Extract<ExtractNotificationType<"mention">, { mentioned_uri: string }>).mentioned_uri 267 267 + : undefined; 268 268 + 269 269 + const documentCreatorDid = new AtUri(notification.data.document_uri).host; 270 270 + const documentCreatorHandle = didToHandleMap.get(documentCreatorDid) ?? null; 271 271 + 272 272 + return { 273 273 + id: notification.id, 274 274 + recipient: notification.recipient, 275 275 + created_at: notification.created_at, 276 276 + type: "mention" as const, 277 277 + document_uri: notification.data.document_uri, 278 278 + mention_type: notification.data.mention_type, 279 279 + mentioned_uri: mentionedUri, 280 280 + document, 281 281 + documentCreatorHandle, 282 282 + mentionedPublication: mentionedUri ? mentionedPublications?.find((p) => p.uri === mentionedUri) : undefined, 283 283 + mentionedDocument: mentionedUri ? mentionedDocuments?.find((d) => d.uri === mentionedUri) : undefined, 284 284 + }; 285 285 + }) 286 286 + .filter((n) => n !== null); 287 287 + } 288 288 + 289 289 + export type HydratedCommentMentionNotification = Awaited< 290 290 + ReturnType<typeof hydrateCommentMentionNotifications> 291 291 + >[0]; 292 292 + 293 293 + async function hydrateCommentMentionNotifications(notifications: NotificationRow[]) { 294 294 + const commentMentionNotifications = notifications.filter( 295 295 + (n): n is NotificationRow & { data: ExtractNotificationType<"comment_mention"> } => 296 296 + (n.data as NotificationData)?.type === "comment_mention", 297 297 + ); 298 298 + 299 299 + if (commentMentionNotifications.length === 0) { 300 300 + return []; 301 301 + } 302 302 + 303 303 + // Fetch comment data from the database 304 304 + const commentUris = commentMentionNotifications.map((n) => n.data.comment_uri); 305 305 + const { data: comments } = await supabaseServerClient 306 306 + .from("comments_on_documents") 307 307 + .select( 308 308 + "*, bsky_profiles(*), documents(*, documents_in_publications(publications(*)))", 309 309 + ) 310 310 + .in("uri", commentUris); 311 311 + 312 312 + // Extract unique DIDs from comment URIs to resolve handles 313 313 + const commenterDids = [...new Set(commentUris.map((uri) => new AtUri(uri).host))]; 314 314 + 315 315 + // Resolve DIDs to handles in parallel 316 316 + const didToHandleMap = new Map<string, string | null>(); 317 317 + await Promise.all( 318 318 + commenterDids.map(async (did) => { 319 319 + try { 320 320 + const resolved = await idResolver.did.resolve(did); 321 321 + const handle = resolved?.alsoKnownAs?.[0] 322 322 + ? resolved.alsoKnownAs[0].slice(5) // Remove "at://" prefix 323 323 + : null; 324 324 + didToHandleMap.set(did, handle); 325 325 + } catch (error) { 326 326 + console.error(`Failed to resolve DID ${did}:`, error); 327 327 + didToHandleMap.set(did, null); 328 328 + } 329 329 + }), 330 330 + ); 331 331 + 332 332 + // Fetch mentioned publications and documents 333 333 + const mentionedPublicationUris = commentMentionNotifications 334 334 + .filter((n) => n.data.mention_type === "publication") 335 335 + .map((n) => (n.data as Extract<ExtractNotificationType<"comment_mention">, { mention_type: "publication" }>).mentioned_uri); 336 336 + 337 337 + const mentionedDocumentUris = commentMentionNotifications 338 338 + .filter((n) => n.data.mention_type === "document") 339 339 + .map((n) => (n.data as Extract<ExtractNotificationType<"comment_mention">, { mention_type: "document" }>).mentioned_uri); 340 340 + 341 341 + const [{ data: mentionedPublications }, { data: mentionedDocuments }] = await Promise.all([ 342 342 + mentionedPublicationUris.length > 0 343 343 + ? supabaseServerClient 344 344 + .from("publications") 345 345 + .select("*") 346 346 + .in("uri", mentionedPublicationUris) 347 347 + : Promise.resolve({ data: [] }), 348 348 + mentionedDocumentUris.length > 0 349 349 + ? supabaseServerClient 350 350 + .from("documents") 351 351 + .select("*, documents_in_publications(publications(*))") 352 352 + .in("uri", mentionedDocumentUris) 353 353 + : Promise.resolve({ data: [] }), 354 354 + ]); 355 355 + 356 356 + return commentMentionNotifications 357 357 + .map((notification) => { 358 358 + const commentData = comments?.find((c) => c.uri === notification.data.comment_uri); 359 359 + if (!commentData) return null; 360 360 + 361 361 + const mentionedUri = notification.data.mention_type !== "did" 362 362 + ? (notification.data as Extract<ExtractNotificationType<"comment_mention">, { mentioned_uri: string }>).mentioned_uri 363 363 + : undefined; 364 364 + 365 365 + const commenterDid = new AtUri(notification.data.comment_uri).host; 366 366 + const commenterHandle = didToHandleMap.get(commenterDid) ?? null; 367 367 + 368 368 + return { 369 369 + id: notification.id, 370 370 + recipient: notification.recipient, 371 371 + created_at: notification.created_at, 372 372 + type: "comment_mention" as const, 373 373 + comment_uri: notification.data.comment_uri, 374 374 + mention_type: notification.data.mention_type, 375 375 + mentioned_uri: mentionedUri, 376 376 + commentData, 377 377 + commenterHandle, 378 378 + mentionedPublication: mentionedUri ? mentionedPublications?.find((p) => p.uri === mentionedUri) : undefined, 379 379 + mentionedDocument: mentionedUri ? mentionedDocuments?.find((d) => d.uri === mentionedUri) : undefined, 380 380 + }; 381 381 + }) 382 382 + .filter((n) => n !== null); 123 383 } 124 384 125 385 export async function pingIdentityToUpdateNotification(did: string) {

+34 -8

src/replicache/mutations.ts

··· 609 609 }; 610 610 611 611 const updatePublicationDraft: Mutation<{ 612 612 - title: string; 613 613 - description: string; 612 612 + title?: string; 613 613 + description?: string; 614 614 + tags?: string[]; 614 615 }> = async (args, ctx) => { 615 616 await ctx.runOnServer(async (serverCtx) => { 616 617 console.log("updating"); 617 617 - await serverCtx.supabase 618 618 - .from("leaflets_in_publications") 619 619 - .update({ description: args.description, title: args.title }) 620 620 - .eq("leaflet", ctx.permission_token_id); 618 618 + const updates: { 619 619 + description?: string; 620 620 + title?: string; 621 621 + tags?: string[]; 622 622 + } = {}; 623 623 + if (args.description !== undefined) updates.description = args.description; 624 624 + if (args.title !== undefined) updates.title = args.title; 625 625 + if (args.tags !== undefined) updates.tags = args.tags; 626 626 + 627 627 + if (Object.keys(updates).length > 0) { 628 628 + // First try to update leaflets_in_publications (for publications) 629 629 + const { data: pubResult } = await serverCtx.supabase 630 630 + .from("leaflets_in_publications") 631 631 + .update(updates) 632 632 + .eq("leaflet", ctx.permission_token_id) 633 633 + .select("leaflet"); 634 634 + 635 635 + // If no rows were updated in leaflets_in_publications, 636 636 + // try leaflets_to_documents (for standalone documents) 637 637 + if (!pubResult || pubResult.length === 0) { 638 638 + await serverCtx.supabase 639 639 + .from("leaflets_to_documents") 640 640 + .update(updates) 641 641 + .eq("leaflet", ctx.permission_token_id); 642 642 + } 643 643 + } 621 644 }); 622 645 await ctx.runOnClient(async ({ tx }) => { 623 623 - await tx.set("publication_title", args.title); 624 624 - await tx.set("publication_description", args.description); 646 646 + if (args.title !== undefined) 647 647 + await tx.set("publication_title", args.title); 648 648 + if (args.description !== undefined) 649 649 + await tx.set("publication_description", args.description); 650 650 + if (args.tags !== undefined) await tx.set("publication_tags", args.tags); 625 651 }); 626 652 }; 627 653

+1

src/utils/codeLanguageStorage.ts

··· 1 1 + export const LAST_USED_CODE_LANGUAGE_KEY = "lastUsedCodeLanguage";

+116

src/utils/deleteBlock.ts

··· 1 1 + import { Replicache } from "replicache"; 2 2 + import { ReplicacheMutators } from "src/replicache"; 3 3 + import { useUIState } from "src/useUIState"; 4 4 + import { scanIndex } from "src/replicache/utils"; 5 5 + import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 6 6 + import { focusBlock } from "src/utils/focusBlock"; 7 7 + 8 8 + export async function deleteBlock( 9 9 + entities: string[], 10 10 + rep: Replicache<ReplicacheMutators>, 11 11 + ) { 12 12 + // get what pagess we need to close as a result of deleting this block 13 13 + let pagesToClose = [] as string[]; 14 14 + for (let entity of entities) { 15 15 + let [type] = await rep.query((tx) => 16 16 + scanIndex(tx).eav(entity, "block/type"), 17 17 + ); 18 18 + if (type.data.value === "card") { 19 19 + let [childPages] = await rep?.query( 20 20 + (tx) => scanIndex(tx).eav(entity, "block/card") || [], 21 21 + ); 22 22 + pagesToClose = [childPages?.data.value]; 23 23 + } 24 24 + if (type.data.value === "mailbox") { 25 25 + let [archive] = await rep?.query( 26 26 + (tx) => scanIndex(tx).eav(entity, "mailbox/archive") || [], 27 27 + ); 28 28 + let [draft] = await rep?.query( 29 29 + (tx) => scanIndex(tx).eav(entity, "mailbox/draft") || [], 30 30 + ); 31 31 + pagesToClose = [archive?.data.value, draft?.data.value]; 32 32 + } 33 33 + } 34 34 + 35 35 + // the next and previous blocks in the block list 36 36 + // if the focused thing is a page and not a block, return 37 37 + let focusedBlock = useUIState.getState().focusedEntity; 38 38 + let parent = 39 39 + focusedBlock?.entityType === "page" 40 40 + ? focusedBlock.entityID 41 41 + : focusedBlock?.parent; 42 42 + 43 43 + if (parent) { 44 44 + let parentType = await rep?.query((tx) => 45 45 + scanIndex(tx).eav(parent, "page/type"), 46 46 + ); 47 47 + if (parentType[0]?.data.value === "canvas") { 48 48 + useUIState 49 49 + .getState() 50 50 + .setFocusedBlock({ entityType: "page", entityID: parent }); 51 51 + useUIState.getState().setSelectedBlocks([]); 52 52 + } else { 53 53 + let siblings = 54 54 + (await rep?.query((tx) => getBlocksWithType(tx, parent))) || []; 55 55 + 56 56 + let selectedBlocks = useUIState.getState().selectedBlocks; 57 57 + let firstSelected = selectedBlocks[0]; 58 58 + let lastSelected = selectedBlocks[entities.length - 1]; 59 59 + 60 60 + let prevBlock = 61 61 + siblings?.[ 62 62 + siblings.findIndex((s) => s.value === firstSelected?.value) - 1 63 63 + ]; 64 64 + let prevBlockType = await rep?.query((tx) => 65 65 + scanIndex(tx).eav(prevBlock?.value, "block/type"), 66 66 + ); 67 67 + 68 68 + let nextBlock = 69 69 + siblings?.[ 70 70 + siblings.findIndex((s) => s.value === lastSelected.value) + 1 71 71 + ]; 72 72 + let nextBlockType = await rep?.query((tx) => 73 73 + scanIndex(tx).eav(nextBlock?.value, "block/type"), 74 74 + ); 75 75 + 76 76 + if (prevBlock) { 77 77 + useUIState.getState().setSelectedBlock({ 78 78 + value: prevBlock.value, 79 79 + parent: prevBlock.parent, 80 80 + }); 81 81 + 82 82 + focusBlock( 83 83 + { 84 84 + value: prevBlock.value, 85 85 + type: prevBlockType?.[0].data.value, 86 86 + parent: prevBlock.parent, 87 87 + }, 88 88 + { type: "end" }, 89 89 + ); 90 90 + } else { 91 91 + useUIState.getState().setSelectedBlock({ 92 92 + value: nextBlock.value, 93 93 + parent: nextBlock.parent, 94 94 + }); 95 95 + 96 96 + focusBlock( 97 97 + { 98 98 + value: nextBlock.value, 99 99 + type: nextBlockType?.[0]?.data.value, 100 100 + parent: nextBlock.parent, 101 101 + }, 102 102 + { type: "start" }, 103 103 + ); 104 104 + } 105 105 + } 106 106 + } 107 107 + 108 108 + pagesToClose.forEach((page) => page && useUIState.getState().closePage(page)); 109 109 + await Promise.all( 110 110 + entities.map((entity) => 111 111 + rep?.mutate.removeBlock({ 112 112 + blockEntity: entity, 113 113 + }), 114 114 + ), 115 115 + ); 116 116 + }

+37

src/utils/focusElement.ts

··· 1 1 + import { isIOS } from "src/utils/isDevice"; 2 2 + 3 3 + export const focusElement = ( 4 4 + el?: HTMLInputElement | HTMLTextAreaElement | null, 5 5 + ) => { 6 6 + if (!isIOS()) { 7 7 + el?.focus(); 8 8 + return; 9 9 + } 10 10 + 11 11 + let fakeInput = document.createElement("input"); 12 12 + fakeInput.setAttribute("type", "text"); 13 13 + fakeInput.style.position = "fixed"; 14 14 + fakeInput.style.height = "0px"; 15 15 + fakeInput.style.width = "0px"; 16 16 + fakeInput.style.fontSize = "16px"; // disable auto zoom 17 17 + document.body.appendChild(fakeInput); 18 18 + fakeInput.focus(); 19 19 + setTimeout(() => { 20 20 + if (!el) return; 21 21 + el.style.transform = "translateY(-2000px)"; 22 22 + el?.focus(); 23 23 + fakeInput.remove(); 24 24 + el.value = " "; 25 25 + el.setSelectionRange(1, 1); 26 26 + requestAnimationFrame(() => { 27 27 + if (el) { 28 28 + el.style.transform = ""; 29 29 + } 30 30 + }); 31 31 + setTimeout(() => { 32 32 + if (!el) return; 33 33 + el.value = ""; 34 34 + el.setSelectionRange(0, 0); 35 35 + }, 50); 36 36 + }, 20); 37 37 + };

+73

src/utils/focusPage.ts

··· 1 1 + import { Replicache } from "replicache"; 2 2 + import { Fact, ReplicacheMutators } from "src/replicache"; 3 3 + import { useUIState } from "src/useUIState"; 4 4 + import { scanIndex } from "src/replicache/utils"; 5 5 + import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 6 6 + import { elementId } from "src/utils/elementId"; 7 7 + import { focusBlock } from "src/utils/focusBlock"; 8 8 + 9 9 + export async function focusPage( 10 10 + pageID: string, 11 11 + rep: Replicache<ReplicacheMutators>, 12 12 + focusFirstBlock?: "focusFirstBlock", 13 13 + ) { 14 14 + // if this page is already focused, 15 15 + let focusedBlock = useUIState.getState().focusedEntity; 16 16 + // else set this page as focused 17 17 + useUIState.setState(() => ({ 18 18 + focusedEntity: { 19 19 + entityType: "page", 20 20 + entityID: pageID, 21 21 + }, 22 22 + })); 23 23 + 24 24 + setTimeout(async () => { 25 25 + //scroll to page 26 26 + 27 27 + scrollIntoViewIfNeeded( 28 28 + document.getElementById(elementId.page(pageID).container), 29 29 + false, 30 30 + "smooth", 31 31 + ); 32 32 + 33 33 + // if we asked that the function focus the first block, focus the first block 34 34 + if (focusFirstBlock === "focusFirstBlock") { 35 35 + let firstBlock = await rep.query(async (tx) => { 36 36 + let type = await scanIndex(tx).eav(pageID, "page/type"); 37 37 + let blocks = await scanIndex(tx).eav( 38 38 + pageID, 39 39 + type[0]?.data.value === "canvas" ? "canvas/block" : "card/block", 40 40 + ); 41 41 + 42 42 + let firstBlock = blocks[0]; 43 43 + 44 44 + if (!firstBlock) { 45 45 + return null; 46 46 + } 47 47 + 48 48 + let blockType = ( 49 49 + await tx 50 50 + .scan< 51 51 + Fact<"block/type"> 52 52 + >({ indexName: "eav", prefix: `${firstBlock.data.value}-block/type` }) 53 53 + .toArray() 54 54 + )[0]; 55 55 + 56 56 + if (!blockType) return null; 57 57 + 58 58 + return { 59 59 + value: firstBlock.data.value, 60 60 + type: blockType.data.value, 61 61 + parent: firstBlock.entity, 62 62 + position: firstBlock.data.position, 63 63 + }; 64 64 + }); 65 65 + 66 66 + if (firstBlock) { 67 67 + setTimeout(() => { 68 68 + focusBlock(firstBlock, { type: "start" }); 69 69 + }, 500); 70 70 + } 71 71 + } 72 72 + }, 50); 73 73 + }

+6 -1

src/utils/getMicroLinkOgImage.ts

··· 17 17 hostname = "leaflet.pub"; 18 18 } 19 19 let full_path = `${protocol}://${hostname}${path}`; 20 20 - return getWebpageImage(full_path, options); 20 20 + return getWebpageImage(full_path, { 21 21 + ...options, 22 22 + setJavaScriptEnabled: false, 23 23 + }); 21 24 } 22 25 23 26 export async function getWebpageImage( 24 27 url: string, 25 28 options?: { 29 29 + setJavaScriptEnabled?: boolean; 26 30 width?: number; 27 31 height?: number; 28 32 deviceScaleFactor?: number; ··· 39 43 }, 40 44 body: JSON.stringify({ 41 45 url, 46 46 + setJavaScriptEnabled: options?.setJavaScriptEnabled, 42 47 scrollPage: true, 43 48 addStyleTag: [ 44 49 {

+50

src/utils/getPublicationMetadataFromLeafletData.ts

··· 1 1 + import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data"; 2 2 + import { Json } from "supabase/database.types"; 3 3 + 4 4 + export function getPublicationMetadataFromLeafletData( 5 5 + data?: GetLeafletDataReturnType["result"]["data"], 6 6 + ) { 7 7 + if (!data) return null; 8 8 + 9 9 + let pubData: 10 10 + | { 11 11 + description: string; 12 12 + title: string; 13 13 + leaflet: string; 14 14 + doc: string | null; 15 15 + publications: { 16 16 + identity_did: string; 17 17 + name: string; 18 18 + indexed_at: string; 19 19 + record: Json | null; 20 20 + uri: string; 21 21 + } | null; 22 22 + documents: { 23 23 + data: Json; 24 24 + indexed_at: string; 25 25 + uri: string; 26 26 + } | null; 27 27 + } 28 28 + | undefined 29 29 + | null = 30 30 + data?.leaflets_in_publications?.[0] || 31 31 + data?.permission_token_rights[0].entity_sets?.permission_tokens?.find( 32 32 + (p) => p.leaflets_in_publications?.length, 33 33 + )?.leaflets_in_publications?.[0]; 34 34 + 35 35 + // If not found, check for standalone documents 36 36 + let standaloneDoc = 37 37 + data?.leaflets_to_documents?.[0] || 38 38 + data?.permission_token_rights[0].entity_sets?.permission_tokens.find( 39 39 + (p) => p.leaflets_to_documents?.length, 40 40 + )?.leaflets_to_documents?.[0]; 41 41 + if (!pubData && standaloneDoc) { 42 42 + // Transform standalone document data to match the expected format 43 43 + pubData = { 44 44 + ...standaloneDoc, 45 45 + publications: null, // No publication for standalone docs 46 46 + doc: standaloneDoc.document, 47 47 + }; 48 48 + } 49 49 + return pubData; 50 50 + }

+59

src/utils/mentionUtils.ts

··· 1 1 + import { AtUri } from "@atproto/api"; 2 2 + 3 3 + /** 4 4 + * Converts a DID to a Bluesky profile URL 5 5 + */ 6 6 + export function didToBlueskyUrl(did: string): string { 7 7 + return `https://bsky.app/profile/${did}`; 8 8 + } 9 9 + 10 10 + /** 11 11 + * Converts an AT URI (publication or document) to the appropriate URL 12 12 + */ 13 13 + export function atUriToUrl(atUri: string): string { 14 14 + try { 15 15 + const uri = new AtUri(atUri); 16 16 + 17 17 + if (uri.collection === "pub.leaflet.publication") { 18 18 + // Publication URL: /lish/{did}/{rkey} 19 19 + return `/lish/${uri.host}/${uri.rkey}`; 20 20 + } else if (uri.collection === "pub.leaflet.document") { 21 21 + // Document URL - we need to resolve this via the API 22 22 + // For now, create a redirect route that will handle it 23 23 + return `/lish/uri/${encodeURIComponent(atUri)}`; 24 24 + } 25 25 + 26 26 + return "#"; 27 27 + } catch (e) { 28 28 + console.error("Failed to parse AT URI:", atUri, e); 29 29 + return "#"; 30 30 + } 31 31 + } 32 32 + 33 33 + /** 34 34 + * Opens a mention link in the appropriate way 35 35 + * - DID mentions open in a new tab (external Bluesky) 36 36 + * - Publication/document mentions navigate in the same tab 37 37 + */ 38 38 + export function handleMentionClick( 39 39 + e: MouseEvent | React.MouseEvent, 40 40 + type: "did" | "at-uri", 41 41 + value: string 42 42 + ) { 43 43 + e.preventDefault(); 44 44 + e.stopPropagation(); 45 45 + 46 46 + if (type === "did") { 47 47 + // Open Bluesky profile in new tab 48 48 + window.open(didToBlueskyUrl(value), "_blank", "noopener,noreferrer"); 49 49 + } else { 50 50 + // Navigate to publication/document in same tab 51 51 + const url = atUriToUrl(value); 52 52 + if (url.startsWith("/lish/uri/")) { 53 53 + // Redirect route - navigate to it 54 54 + window.location.href = url; 55 55 + } else { 56 56 + window.location.href = url; 57 57 + } 58 58 + } 59 59 + }

+41

src/utils/yjsFragmentToString.ts

··· 1 1 + import { XmlElement, XmlText, XmlHook } from "yjs"; 2 2 + 3 3 + export type Delta = { 4 4 + insert: string; 5 5 + attributes?: { 6 6 + strong?: {}; 7 7 + code?: {}; 8 8 + em?: {}; 9 9 + underline?: {}; 10 10 + strikethrough?: {}; 11 11 + highlight?: { color: string }; 12 12 + link?: { href: string }; 13 13 + }; 14 14 + }; 15 15 + 16 16 + export function YJSFragmentToString( 17 17 + node: XmlElement | XmlText | XmlHook, 18 18 + ): string { 19 19 + if (node.constructor === XmlElement) { 20 20 + // Handle hard_break nodes specially 21 21 + if (node.nodeName === "hard_break") { 22 22 + return "\n"; 23 23 + } 24 24 + // Handle inline mention nodes 25 25 + if (node.nodeName === "didMention" || node.nodeName === "atMention") { 26 26 + return node.getAttribute("text") || ""; 27 27 + } 28 28 + return node 29 29 + .toArray() 30 30 + .map((f) => YJSFragmentToString(f)) 31 31 + .join(""); 32 32 + } 33 33 + if (node.constructor === XmlText) { 34 34 + return (node.toDelta() as Delta[]) 35 35 + .map((d) => { 36 36 + return d.insert; 37 37 + }) 38 38 + .join(""); 39 39 + } 40 40 + return ""; 41 41 + }

+9

supabase/database.types.ts

··· 1158 1158 } 1159 1159 Returns: Database["public"]["CompositeTypes"]["pull_result"] 1160 1160 } 1161 1161 + search_tags: { 1162 1162 + Args: { 1163 1163 + search_query: string 1164 1164 + } 1165 1165 + Returns: { 1166 1166 + name: string 1167 1167 + document_count: number 1168 1168 + }[] 1169 1169 + } 1161 1170 } 1162 1171 Enums: { 1163 1172 rsvp_status: "GOING" | "NOT_GOING" | "MAYBE"

+15

supabase/migrations/20251122220118_add_cascade_on_update_to_pt_relations.sql

··· 1 1 + alter table "public"."permission_token_on_homepage" drop constraint "permission_token_creator_token_fkey"; 2 2 + 3 3 + alter table "public"."leaflets_in_publications" drop constraint "leaflets_in_publications_leaflet_fkey"; 4 4 + 5 5 + alter table "public"."leaflets_in_publications" drop column "archived"; 6 6 + 7 7 + alter table "public"."permission_token_on_homepage" drop column "archived"; 8 8 + 9 9 + alter table "public"."permission_token_on_homepage" add constraint "permission_token_on_homepage_token_fkey" FOREIGN KEY (token) REFERENCES permission_tokens(id) ON UPDATE CASCADE ON DELETE CASCADE not valid; 10 10 + 11 11 + alter table "public"."permission_token_on_homepage" validate constraint "permission_token_on_homepage_token_fkey"; 12 12 + 13 13 + alter table "public"."leaflets_in_publications" add constraint "leaflets_in_publications_leaflet_fkey" FOREIGN KEY (leaflet) REFERENCES permission_tokens(id) ON UPDATE CASCADE ON DELETE CASCADE not valid; 14 14 + 15 15 + alter table "public"."leaflets_in_publications" validate constraint "leaflets_in_publications_leaflet_fkey";

+2

supabase/migrations/20251124214105_add_back_archived_cols.sql

··· 1 1 + alter table "public"."permission_token_on_homepage" add column "archived" boolean; 2 2 + alter table "public"."leaflets_in_publications" add column "archived" boolean;

+30

supabase/migrations/20251204120000_add_tags_support.sql

··· 1 1 + -- Create GIN index on the tags array in the JSONB data field 2 2 + -- This allows efficient querying of documents by tag 3 3 + CREATE INDEX IF NOT EXISTS idx_documents_tags 4 4 + ON "public"."documents" USING gin ((data->'tags')); 5 5 + 6 6 + -- Function to search and aggregate tags from documents 7 7 + -- This does the aggregation in the database rather than fetching all documents 8 8 + CREATE OR REPLACE FUNCTION search_tags(search_query text) 9 9 + RETURNS TABLE (name text, document_count bigint) AS $$ 10 10 + BEGIN 11 11 + RETURN QUERY 12 12 + SELECT 13 13 + LOWER(tag::text) as name, 14 14 + COUNT(DISTINCT d.uri) as document_count 15 15 + FROM 16 16 + "public"."documents" d, 17 17 + jsonb_array_elements_text(d.data->'tags') as tag 18 18 + WHERE 19 19 + CASE 20 20 + WHEN search_query = '' THEN true 21 21 + ELSE LOWER(tag::text) LIKE '%' || search_query || '%' 22 22 + END 23 23 + GROUP BY 24 24 + LOWER(tag::text) 25 25 + ORDER BY 26 26 + COUNT(DISTINCT d.uri) DESC, 27 27 + LOWER(tag::text) ASC 28 28 + LIMIT 20; 29 29 + END; 30 30 + $$ LANGUAGE plpgsql STABLE;

+7

supabase/migrations/20251204130000_add_tags_to_drafts.sql

··· 1 1 + -- Add tags column to leaflets_in_publications for publication drafts 2 2 + ALTER TABLE "public"."leaflets_in_publications" 3 3 + ADD COLUMN "tags" text[] DEFAULT ARRAY[]::text[]; 4 4 + 5 5 + -- Add tags column to leaflets_to_documents for standalone document drafts 6 6 + ALTER TABLE "public"."leaflets_to_documents" 7 7 + ADD COLUMN "tags" text[] DEFAULT ARRAY[]::text[];

+38

supabase/migrations/20251204140000_update_pull_data_with_tags.sql

··· 1 1 + set check_function_bodies = off; 2 2 + 3 3 + CREATE OR REPLACE FUNCTION public.pull_data(token_id uuid, client_group_id text) 4 4 + RETURNS pull_result 5 5 + LANGUAGE plpgsql 6 6 + AS $function$DECLARE 7 7 + result pull_result; 8 8 + BEGIN 9 9 + -- Get client group data as JSON array 10 10 + SELECT json_agg(row_to_json(rc)) 11 11 + FROM replicache_clients rc 12 12 + WHERE rc.client_group = client_group_id 13 13 + INTO result.client_groups; 14 14 + 15 15 + -- Get facts as JSON array 16 16 + SELECT json_agg(row_to_json(f)) 17 17 + FROM permission_tokens pt, 18 18 + get_facts(pt.root_entity) f 19 19 + WHERE pt.id = token_id 20 20 + INTO result.facts; 21 21 + 22 22 + -- Get publication data - try leaflets_in_publications first, then leaflets_to_documents 23 23 + SELECT json_agg(row_to_json(lip)) 24 24 + FROM leaflets_in_publications lip 25 25 + WHERE lip.leaflet = token_id 26 26 + INTO result.publications; 27 27 + 28 28 + -- If no publication data found, try leaflets_to_documents (for standalone documents) 29 29 + IF result.publications IS NULL THEN 30 30 + SELECT json_agg(row_to_json(ltd)) 31 31 + FROM leaflets_to_documents ltd 32 32 + WHERE ltd.leaflet = token_id 33 33 + INTO result.publications; 34 34 + END IF; 35 35 + 36 36 + RETURN result; 37 37 + END;$function$ 38 38 + ;

+1 -1

tsconfig.json

··· 21 21 "moduleResolution": "node", 22 22 "resolveJsonModule": true, 23 23 "isolatedModules": true, 24 24 - "jsx": "preserve", 24 24 + "jsx": "react-jsx", 25 25 "plugins": [ 26 26 { 27 27 "name": "next"