leaflet.pub
a tool for shared writing and social publishing
cozylittle.house
1"use client";
2import { ButtonPrimary } from "components/Buttons";
3import {
4 SelectedPostListing,
5 useSelectedPostListing,
6} from "src/useSelectedPostState";
7import { CommentsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Comments";
8import { CloseTiny } from "components/Icons/CloseTiny";
9import { SpeedyLink } from "components/SpeedyLink";
10import { GoToArrow } from "components/Icons/GoToArrow";
11import { DotLoader } from "components/utils/DotLoader";
12import { ReaderMentionsContent } from "./ReaderMentionsContent";
13import { callRPC } from "app/api/rpc/client";
14import useSWR from "swr";
15import { getDocumentURL } from "app/lish/createPub/getPublicationURL";
16
17export const MobileInteractionPreviewDrawer = () => {
18 let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
19
20 return (
21 <div
22 className={`mobileInteractionPreview shrink-0 z-20 fixed bottom-0 left-0 right-0 border border-border-light w-screen h-[90vh] px-3 bg-bg-leaflet rounded-t-lg overflow-auto ${selectedPost === null ? "hidden" : "block md:hidden "}`}
23 >
24 <PreviewDrawerContent selectedPost={selectedPost} />
25 </div>
26 );
27};
28
29export const DesktopInteractionPreviewDrawer = () => {
30 let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
31
32 return (
33 <div
34 className={`desktopInteractionPreview shrink-0 hidden md:block border border-border-light w-96 mr-2 px-3 h-[calc(100vh-100px)] sticky top-11 bottom-4 right-0 rounded-lg overflow-auto ${selectedPost === null ? "shadow-none border-dashed bg-transparent" : "shadow-md border-border bg-bg-page "}`}
35 >
36 <PreviewDrawerContent selectedPost={selectedPost} />
37 </div>
38 );
39};
40
41const PreviewDrawerContent = (props: {
42 selectedPost: SelectedPostListing | null;
43}) => {
44 const documentUri = props.selectedPost?.document_uri || null;
45 const drawer = props.selectedPost?.drawer || null;
46
47 const { data, isLoading } = useSWR(
48 documentUri ? ["get_document_interactions", documentUri] : null,
49 async () => {
50 const res = await callRPC("get_document_interactions", {
51 document_uri: documentUri!,
52 });
53 return res;
54 },
55 { keepPreviousData: false },
56 );
57
58 if (!props.selectedPost || !props.selectedPost.document)
59 return (
60 <div className="italic text-tertiary pt-4 text-center">
61 Click a post's comments or mentions to preview them here!
62 </div>
63 );
64
65 const postUrl = getDocumentURL(
66 props.selectedPost.document,
67 props.selectedPost.document_uri,
68 props.selectedPost.publication,
69 );
70
71 const drawerTitle =
72 drawer === "quotes"
73 ? `Mentions of ${props.selectedPost.document.title}`
74 : `Comments for ${props.selectedPost.document.title}`;
75
76 return (
77 <>
78 <div className="sticky top-0 bg-bg-page z-10">
79 <div className=" w-full text-sm text-tertiary flex justify-between pt-3 gap-3">
80 <div className="truncate min-w-0 grow">{drawerTitle}</div>
81 <button
82 className="text-tertiary"
83 onClick={() =>
84 useSelectedPostListing.getState().setSelectedPostListing(null)
85 }
86 >
87 <CloseTiny />
88 </button>
89 </div>
90 <SpeedyLink className="shrink-0 flex gap-1 items-center" href={postUrl}>
91 <ButtonPrimary fullWidth compact className="text-sm! mt-1">
92 See Full Post <GoToArrow />
93 </ButtonPrimary>
94 </SpeedyLink>
95 <hr className="mt-2 border-border-light" />
96 </div>
97 {isLoading ? (
98 <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm mt-8">
99 <span>loading</span>
100 <DotLoader />
101 </div>
102 ) : drawer === "quotes" ? (
103 <div className="mt-3">
104 <ReaderMentionsContent
105 quotesAndMentions={data?.quotesAndMentions || []}
106 />
107 </div>
108 ) : (
109 <CommentsDrawerContent
110 noCommentBox
111 document_uri={props.selectedPost.document_uri}
112 comments={data?.comments || []}
113 />
114 )}
115 </>
116 );
117};