+1

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

··· 238 238 data={props.data} 239 239 profile={props.profile} 240 240 preferences={props.preferences} 241 241 + isCanvas 241 242 /> 242 243 </Popover> 243 244 </>

+25 -20

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

··· 140 140 <div 141 141 className={`flex gap-2 text-tertiary text-sm item-center ${props.className}`} 142 142 > 143 143 - {/*COMMENT BUTTON*/} 144 144 - {props.showComments === false ? null : ( 145 145 - <button 146 146 - className="flex gap-2 items-center w-fit" 147 147 - onClick={() => { 148 148 - if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId) 149 149 - openInteractionDrawer("comments", document_uri, props.pageId); 150 150 - else setInteractionState(document_uri, { drawerOpen: false }); 151 151 - }} 152 152 - aria-label="Post comments" 153 153 - > 154 154 - <CommentTiny aria-hidden /> {props.commentsCount} 155 155 - </button> 143 143 + {props.showRecommends === false ? null : ( 144 144 + <RecommendButton 145 145 + documentUri={document_uri} 146 146 + recommendsCount={props.recommendsCount} 147 147 + /> 156 148 )} 157 149 158 150 {/*MENTIONS BUTTON*/} ··· 171 163 <QuoteTiny aria-hidden /> {props.quotesCount} 172 164 </button> 173 165 )} 174 174 - {props.showRecommends === false ? null : ( 175 175 - <RecommendButton 176 176 - documentUri={document_uri} 177 177 - recommendsCount={props.recommendsCount} 178 178 - /> 166 166 + {/*COMMENT BUTTON*/} 167 167 + {props.showComments === false ? null : ( 168 168 + <button 169 169 + className="flex gap-2 items-center w-fit" 170 170 + onClick={() => { 171 171 + if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId) 172 172 + openInteractionDrawer("comments", document_uri, props.pageId); 173 173 + else setInteractionState(document_uri, { drawerOpen: false }); 174 174 + }} 175 175 + aria-label="Post comments" 176 176 + > 177 177 + <CommentTiny aria-hidden /> {props.commentsCount} 178 178 + </button> 179 179 )} 180 180 - <Separator classname="h-4!" /> 181 181 - {tagCount > 0 && <TagPopover tags={tags} tagCount={tagCount} />} 180 180 + 181 181 + {tagCount > 0 && ( 182 182 + <> 183 183 + interactionsAvailable && <Separator classname="h-4!" /> 184 184 + <TagPopover tags={tags} tagCount={tagCount} /> 185 185 + </> 186 186 + )} 182 187 </div> 183 188 ); 184 189 };

+15 -10

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

··· 23 23 showMentions?: boolean; 24 24 showRecommends?: boolean; 25 25 }; 26 26 + isCanvas?: boolean; 26 27 }) { 27 28 let { identity } = useIdentityData(); 28 29 let document = props.data; ··· 88 89 </> 89 90 ) : null} 90 91 </div> 91 91 - <Interactions 92 92 - showComments={props.preferences.showComments !== false} 93 93 - showMentions={props.preferences.showMentions !== false} 94 94 - showRecommends={props.preferences.showRecommends !== false} 95 95 - quotesCount={getQuoteCount(document?.quotesAndMentions || []) || 0} 96 96 - commentsCount={ 97 97 - getCommentCount(document?.comments_on_documents || []) || 0 98 98 - } 99 99 - recommendsCount={document?.recommendsCount || 0} 100 100 - /> 92 92 + {!props.isCanvas && ( 93 93 + <Interactions 94 94 + showComments={props.preferences.showComments !== false} 95 95 + showMentions={props.preferences.showMentions !== false} 96 96 + showRecommends={props.preferences.showRecommends !== false} 97 97 + quotesCount={ 98 98 + getQuoteCount(document?.quotesAndMentions || []) || 0 99 99 + } 100 100 + commentsCount={ 101 101 + getCommentCount(document?.comments_on_documents || []) || 0 102 102 + } 103 103 + recommendsCount={document?.recommendsCount || 0} 104 104 + /> 105 105 + )} 101 106 </> 102 107 } 103 108 />

+18 -3

components/Canvas.tsx

··· 19 19 import { Separator } from "./Layout"; 20 20 import { CommentTiny } from "./Icons/CommentTiny"; 21 21 import { QuoteTiny } from "./Icons/QuoteTiny"; 22 22 - import { PublicationMetadata } from "./Pages/PublicationMetadata"; 22 22 + import { AddTags, PublicationMetadata } from "./Pages/PublicationMetadata"; 23 23 import { useLeafletPublicationData } from "./PageSWRDataProvider"; 24 24 import { useHandleCanvasDrop } from "./Blocks/useHandleCanvasDrop"; 25 25 import { useBlockMouseHandlers } from "./Blocks/useBlockMouseHandlers"; 26 26 + import { RecommendTinyEmpty } from "./Icons/RecommendTiny"; 26 27 27 28 export function Canvas(props: { 28 29 entityID: string; ··· 168 169 if (!normalizedPublication) return null; 169 170 let showComments = normalizedPublication.preferences?.showComments !== false; 170 171 let showMentions = normalizedPublication.preferences?.showMentions !== false; 172 172 + let showRecommends = 173 173 + normalizedPublication.preferences?.showRecommends !== false; 171 174 172 175 return ( 173 176 <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"> 177 177 + {showRecommends && ( 178 178 + <div className="flex gap-1 text-tertiary items-center"> 179 179 + <RecommendTinyEmpty className="text-border" /> — 180 180 + </div> 181 181 + )} 174 182 {showComments && ( 175 183 <div className="flex gap-1 text-tertiary items-center"> 176 184 <CommentTiny className="text-border" /> — 177 185 </div> 178 186 )} 179 179 - {showComments && ( 187 187 + {showMentions && ( 180 188 <div className="flex gap-1 text-tertiary items-center"> 181 189 <QuoteTiny className="text-border" /> — 182 190 </div> 183 191 )} 184 192 193 193 + {showMentions !== false || 194 194 + showComments !== false || 195 195 + showRecommends === false ? ( 196 196 + <Separator classname="h-4!" /> 197 197 + ) : null} 198 198 + <AddTags /> 199 199 + 185 200 {!props.isSubpage && ( 186 201 <> 187 202 <Separator classname="h-5" /> ··· 191 206 className="flex flex-col gap-2 p-0! max-w-sm w-[1000px]" 192 207 trigger={<InfoSmall />} 193 208 > 194 194 - <PublicationMetadata /> 209 209 + <PublicationMetadata noInteractions /> 195 210 </Popover> 196 211 </> 197 212 )}

+43 -25

components/Pages/PublicationMetadata.tsx

··· 20 20 import { useIdentityData } from "components/IdentityProvider"; 21 21 import { PostHeaderLayout } from "app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader"; 22 22 import { Backdater } from "./Backdater"; 23 23 + import { RecommendTinyEmpty } from "components/Icons/RecommendTiny"; 23 24 24 24 - export const PublicationMetadata = () => { 25 25 + export const PublicationMetadata = (props: { noInteractions?: boolean }) => { 25 26 let { rep } = useReplicache(); 26 26 - let { data: pub, normalizedDocument, normalizedPublication } = useLeafletPublicationData(); 27 27 + let { 28 28 + data: pub, 29 29 + normalizedDocument, 30 30 + normalizedPublication, 31 31 + } = useLeafletPublicationData(); 27 32 let { identity } = useIdentityData(); 28 33 let title = useSubscribe(rep, (tx) => tx.get<string>("publication_title")); 29 34 let description = useSubscribe(rep, (tx) => ··· 114 119 ) : ( 115 120 <p>Draft</p> 116 121 )} 117 117 - <div className="flex gap-2 text-border items-center"> 118 118 - {tags && ( 119 119 - <> 120 120 - <AddTags /> 121 121 - {normalizedPublication?.preferences?.showMentions !== false || 122 122 - normalizedPublication?.preferences?.showComments !== false ? ( 123 123 - <Separator classname="h-4!" /> 124 124 - ) : null} 125 125 - </> 126 126 - )} 127 127 - {normalizedPublication?.preferences?.showMentions !== false && ( 128 128 - <div className="flex gap-1 items-center"> 129 129 - <QuoteTiny />— 130 130 - </div> 131 131 - )} 132 132 - {normalizedPublication?.preferences?.showComments !== false && ( 133 133 - <div className="flex gap-1 items-center"> 134 134 - <CommentTiny />— 135 135 - </div> 136 136 - )} 137 137 - </div> 122 122 + {!props.noInteractions && ( 123 123 + <div className="flex gap-2 text-border items-center"> 124 124 + {normalizedPublication?.preferences?.showRecommends !== false && ( 125 125 + <div className="flex gap-1 items-center"> 126 126 + <RecommendTinyEmpty />— 127 127 + </div> 128 128 + )} 129 129 + 130 130 + {normalizedPublication?.preferences?.showMentions !== false && ( 131 131 + <div className="flex gap-1 items-center"> 132 132 + <QuoteTiny />— 133 133 + </div> 134 134 + )} 135 135 + {normalizedPublication?.preferences?.showComments !== false && ( 136 136 + <div className="flex gap-1 items-center"> 137 137 + <CommentTiny />— 138 138 + </div> 139 139 + )} 140 140 + {tags && ( 141 141 + <> 142 142 + {normalizedPublication?.preferences?.showRecommends !== 143 143 + false || 144 144 + normalizedPublication?.preferences?.showMentions !== false || 145 145 + normalizedPublication?.preferences?.showComments !== false ? ( 146 146 + <Separator classname="h-4!" /> 147 147 + ) : null} 148 148 + <AddTags /> 149 149 + </> 150 150 + )} 151 151 + </div> 152 152 + )} 138 153 </> 139 154 } 140 155 /> ··· 238 253 ); 239 254 }; 240 255 241 241 - const AddTags = () => { 256 256 + export const AddTags = () => { 242 257 let { data: pub, normalizedDocument } = useLeafletPublicationData(); 243 258 let { rep } = useReplicache(); 244 259 ··· 251 266 let tags: string[] = []; 252 267 if (Array.isArray(replicacheTags)) { 253 268 tags = replicacheTags; 254 254 - } else if (normalizedDocument?.tags && Array.isArray(normalizedDocument.tags)) { 269 269 + } else if ( 270 270 + normalizedDocument?.tags && 271 271 + Array.isArray(normalizedDocument.tags) 272 272 + ) { 255 273 tags = normalizedDocument.tags as string[]; 256 274 } 257 275