leaflet.pub
a tool for shared writing and social publishing
render profile images and pub images
awarm.space
+41
-12
+41
-12
components/Mention.tsx
+41
-12
components/Mention.tsx
···
258
258
onMouseDown={(e) => e.preventDefault()}
259
259
displayName={result.displayName}
260
260
handle={result.handle}
261
+
avatar={result.avatar}
261
262
selected={index === suggestionIndex}
262
263
/>
263
264
) : result.type === "publication" ? (
···
268
269
}}
269
270
onMouseDown={(e) => e.preventDefault()}
270
271
pubName={result.name}
272
+
uri={result.uri}
271
273
selected={index === suggestionIndex}
272
274
onPostsClick={() => {
273
275
handleScopeChange({
···
302
304
const Result = (props: {
303
305
result: React.ReactNode;
304
306
subtext?: React.ReactNode;
307
+
icon?: React.ReactNode;
305
308
onClick: () => void;
306
309
onMouseDown: (e: React.MouseEvent) => void;
307
310
selected?: boolean;
···
309
312
return (
310
313
<button
311
314
className={`
312
-
menuItem w-full flex-col! gap-0!
315
+
menuItem w-full flex-row! gap-2!
313
316
text-secondary leading-snug text-sm
314
317
${props.subtext ? "py-1!" : "py-2!"}
315
318
${props.selected ? "bg-[var(--accent-light)]!" : ""}`}
···
318
321
}}
319
322
onMouseDown={(e) => props.onMouseDown(e)}
320
323
>
321
-
<div
322
-
className={`flex gap-2 items-center w-full truncate justify-between`}
323
-
>
324
-
{props.result}
324
+
{props.icon}
325
+
<div className="flex flex-col min-w-0 flex-1">
326
+
<div
327
+
className={`flex gap-2 items-center w-full truncate justify-between`}
328
+
>
329
+
{props.result}
330
+
</div>
331
+
{props.subtext && (
332
+
<div className="text-tertiary italic text-xs font-normal min-w-0 truncate pb-[1px]">
333
+
{props.subtext}
334
+
</div>
335
+
)}
325
336
</div>
326
-
{props.subtext && (
327
-
<div className="text-tertiary italic text-xs font-normal min-w-0 truncate pb-[1px]">
328
-
{props.subtext}
329
-
</div>
330
-
)}
331
337
</button>
332
338
);
333
339
};
···
357
363
const DidResult = (props: {
358
364
displayName?: string;
359
365
handle: string;
366
+
avatar?: string;
360
367
onClick: () => void;
361
368
onMouseDown: (e: React.MouseEvent) => void;
362
369
selected?: boolean;
363
370
}) => {
364
371
return (
365
372
<Result
373
+
icon={
374
+
props.avatar ? (
375
+
<img
376
+
src={props.avatar}
377
+
alt=""
378
+
className="w-5 h-5 rounded-full shrink-0"
379
+
/>
380
+
) : (
381
+
<div className="w-5 h-5 rounded-full bg-border shrink-0" />
382
+
)
383
+
}
366
384
result={props.displayName ? props.displayName : props.handle}
367
385
subtext={props.displayName && `@${props.handle}`}
368
-
{...props}
386
+
onClick={props.onClick}
387
+
onMouseDown={props.onMouseDown}
388
+
selected={props.selected}
369
389
/>
370
390
);
371
391
};
372
392
373
393
const PublicationResult = (props: {
374
394
pubName: string;
395
+
uri: string;
375
396
onClick: () => void;
376
397
onMouseDown: (e: React.MouseEvent) => void;
377
398
selected?: boolean;
···
379
400
}) => {
380
401
return (
381
402
<Result
403
+
icon={
404
+
<img
405
+
src={`/api/pub_icon?at_uri=${encodeURIComponent(props.uri)}`}
406
+
alt=""
407
+
className="w-5 h-5 rounded-full shrink-0"
408
+
/>
409
+
}
382
410
result={
383
411
<>
384
412
<div className="truncate w-full grow min-w-0">{props.pubName}</div>
···
430
458
};
431
459
432
460
export type Mention =
433
-
| { type: "did"; handle: string; did: string; displayName?: string }
461
+
| { type: "did"; handle: string; did: string; displayName?: string; avatar?: string }
434
462
| { type: "publication"; uri: string; name: string }
435
463
| { type: "post"; uri: string; title: string };
436
464
···
485
513
handle: actor.handle,
486
514
did: actor.did,
487
515
displayName: actor.displayName,
516
+
avatar: actor.avatar,
488
517
})),
489
518
...publications.result.publications.map((p) => ({
490
519
type: "publication" as const,