terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'feat: show attachment preview thumbnail in document bubble' (#6) from terry-staging into main
Some checks failed
Deploy to Frontend Servers / deploy (push) Failing after 11s
Details

Browse Source 
Reviewed-on: #6
This commit was merged in pull request #6.
This commit is contained in:
terry
2026-05-29 04:46:20 +00:00
parent 88a25b6ad4 14c3defd23
commit bcd7395e77
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/messageStream/MessageBubble.tsx
View File

@@ -35,7 +35,7 @@ export function MessageBubble({ post }: { post: Post }) {
return ( return (
<div <div
id={`post-${post.id}`} id={`post-${post.id}`}
className="mx-auto w-full max-w-[358px] scroll-mt-20 md:max-w-[680px] md:scroll-mt-24 lg:max-w-[900px] xl:max-w-[1120px]" className="mx-auto w-full max-w-[358px] scroll-mt-[82px] md:max-w-[680px] md:scroll-mt-[98px] lg:max-w-[900px] xl:max-w-[1120px]"
> >
<article <article
className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${ className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${

27
src/components/messageStream/bubbles/FileDocBubble.tsx
View File

@@ -33,15 +33,28 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
} }
}; };
const isImage = att.kind === "image" || att.mime.startsWith("image/");
const previewUrl =
att.thumbnailUrl ?? att.posterUrl ?? (isImage ? att.url : undefined);
return ( return (
<div className="group flex h-[52px] items-center gap-3"> <div className="group flex h-[52px] items-center gap-3">
<div {previewUrl ? (
className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full" <img
style={{ backgroundColor: color }} src={previewUrl}
aria-hidden="true" alt={displayFilename}
> loading="lazy"
<Icon className="h-8 w-8 text-white" strokeWidth={2.1} /> className="h-[52px] w-[52px] shrink-0 rounded-full object-cover"
</div> />
) : (
<div
className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
style={{ backgroundColor: color }}
aria-hidden="true"
>
<Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
</div>
)}
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div <div
className="truncate text-[15px] font-medium leading-6 text-ark-gold group-hover:text-ark-gold2" className="truncate text-[15px] font-medium leading-6 text-ark-gold group-hover:text-ark-gold2"