a tool for shared writing and social publishing
made some chnages to canvas layout to better match
+102
-58
+1
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+1
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+25
-20
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+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
-
{/*COMMENT BUTTON*/}
144
-
{props.showComments === false ? null : (
145
-
<button
146
-
className="flex gap-2 items-center w-fit"
147
-
onClick={() => {
148
-
if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
149
-
openInteractionDrawer("comments", document_uri, props.pageId);
150
-
else setInteractionState(document_uri, { drawerOpen: false });
151
-
}}
152
-
aria-label="Post comments"
153
-
>
154
-
<CommentTiny aria-hidden /> {props.commentsCount}
155
-
</button>
143
+
{props.showRecommends === false ? null : (
144
+
<RecommendButton
145
+
documentUri={document_uri}
146
+
recommendsCount={props.recommendsCount}
147
+
/>
156
148
)}
157
149
158
150
{/*MENTIONS BUTTON*/}
···
171
163
<QuoteTiny aria-hidden /> {props.quotesCount}
172
164
</button>
173
165
)}
174
-
{props.showRecommends === false ? null : (
175
-
<RecommendButton
176
-
documentUri={document_uri}
177
-
recommendsCount={props.recommendsCount}
178
-
/>
166
+
{/*COMMENT BUTTON*/}
167
+
{props.showComments === false ? null : (
168
+
<button
169
+
className="flex gap-2 items-center w-fit"
170
+
onClick={() => {
171
+
if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
172
+
openInteractionDrawer("comments", document_uri, props.pageId);
173
+
else setInteractionState(document_uri, { drawerOpen: false });
174
+
}}
175
+
aria-label="Post comments"
176
+
>
177
+
<CommentTiny aria-hidden /> {props.commentsCount}
178
+
</button>
179
179
)}
180
-
<Separator classname="h-4!" />
181
-
{tagCount > 0 && <TagPopover tags={tags} tagCount={tagCount} />}
180
+
181
+
{tagCount > 0 && (
182
+
<>
183
+
interactionsAvailable && <Separator classname="h-4!" />
184
+
<TagPopover tags={tags} tagCount={tagCount} />
185
+
</>
186
+
)}
182
187
</div>
183
188
);
184
189
};
+15
-10
app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+15
-10
app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
···
23
23
showMentions?: boolean;
24
24
showRecommends?: boolean;
25
25
};
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
-
<Interactions
92
-
showComments={props.preferences.showComments !== false}
93
-
showMentions={props.preferences.showMentions !== false}
94
-
showRecommends={props.preferences.showRecommends !== false}
95
-
quotesCount={getQuoteCount(document?.quotesAndMentions || []) || 0}
96
-
commentsCount={
97
-
getCommentCount(document?.comments_on_documents || []) || 0
98
-
}
99
-
recommendsCount={document?.recommendsCount || 0}
100
-
/>
92
+
{!props.isCanvas && (
93
+
<Interactions
94
+
showComments={props.preferences.showComments !== false}
95
+
showMentions={props.preferences.showMentions !== false}
96
+
showRecommends={props.preferences.showRecommends !== false}
97
+
quotesCount={
98
+
getQuoteCount(document?.quotesAndMentions || []) || 0
99
+
}
100
+
commentsCount={
101
+
getCommentCount(document?.comments_on_documents || []) || 0
102
+
}
103
+
recommendsCount={document?.recommendsCount || 0}
104
+
/>
105
+
)}
101
106
</>
102
107
}
103
108
/>
+18
-3
components/Canvas.tsx
+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
-
import { PublicationMetadata } from "./Pages/PublicationMetadata";
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
+
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
+
let showRecommends =
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
+
{showRecommends && (
178
+
<div className="flex gap-1 text-tertiary items-center">
179
+
<RecommendTinyEmpty className="text-border" /> —
180
+
</div>
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
-
{showComments && (
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
+
{showMentions !== false ||
194
+
showComments !== false ||
195
+
showRecommends === false ? (
196
+
<Separator classname="h-4!" />
197
+
) : null}
198
+
<AddTags />
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
-
<PublicationMetadata />
209
+
<PublicationMetadata noInteractions />
195
210
</Popover>
196
211
</>
197
212
)}
+43
-25
components/Pages/PublicationMetadata.tsx
+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
+
import { RecommendTinyEmpty } from "components/Icons/RecommendTiny";
23
24
24
-
export const PublicationMetadata = () => {
25
+
export const PublicationMetadata = (props: { noInteractions?: boolean }) => {
25
26
let { rep } = useReplicache();
26
-
let { data: pub, normalizedDocument, normalizedPublication } = useLeafletPublicationData();
27
+
let {
28
+
data: pub,
29
+
normalizedDocument,
30
+
normalizedPublication,
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
-
<div className="flex gap-2 text-border items-center">
118
-
{tags && (
119
-
<>
120
-
<AddTags />
121
-
{normalizedPublication?.preferences?.showMentions !== false ||
122
-
normalizedPublication?.preferences?.showComments !== false ? (
123
-
<Separator classname="h-4!" />
124
-
) : null}
125
-
</>
126
-
)}
127
-
{normalizedPublication?.preferences?.showMentions !== false && (
128
-
<div className="flex gap-1 items-center">
129
-
<QuoteTiny />—
130
-
</div>
131
-
)}
132
-
{normalizedPublication?.preferences?.showComments !== false && (
133
-
<div className="flex gap-1 items-center">
134
-
<CommentTiny />—
135
-
</div>
136
-
)}
137
-
</div>
122
+
{!props.noInteractions && (
123
+
<div className="flex gap-2 text-border items-center">
124
+
{normalizedPublication?.preferences?.showRecommends !== false && (
125
+
<div className="flex gap-1 items-center">
126
+
<RecommendTinyEmpty />—
127
+
</div>
128
+
)}
129
+
130
+
{normalizedPublication?.preferences?.showMentions !== false && (
131
+
<div className="flex gap-1 items-center">
132
+
<QuoteTiny />—
133
+
</div>
134
+
)}
135
+
{normalizedPublication?.preferences?.showComments !== false && (
136
+
<div className="flex gap-1 items-center">
137
+
<CommentTiny />—
138
+
</div>
139
+
)}
140
+
{tags && (
141
+
<>
142
+
{normalizedPublication?.preferences?.showRecommends !==
143
+
false ||
144
+
normalizedPublication?.preferences?.showMentions !== false ||
145
+
normalizedPublication?.preferences?.showComments !== false ? (
146
+
<Separator classname="h-4!" />
147
+
) : null}
148
+
<AddTags />
149
+
</>
150
+
)}
151
+
</div>
152
+
)}
138
153
</>
139
154
}
140
155
/>
···
238
253
);
239
254
};
240
255
241
-
const AddTags = () => {
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
-
} else if (normalizedDocument?.tags && Array.isArray(normalizedDocument.tags)) {
269
+
} else if (
270
+
normalizedDocument?.tags &&
271
+
Array.isArray(normalizedDocument.tags)
272
+
) {
255
273
tags = normalizedDocument.tags as string[];
256
274
}
257
275