f2f2572cd2
Image, album, and video bubbles in the official-assets category now render the attachment filename as a bottom-left overlay so editors can identify the source asset at a glance. Shared AttachmentFilenameLabel component mirrors the AttachmentDownloadPill style, uses filenameWithExtension so MIME-only attachments still get a sensible label, and is pointer-events-none so it never blocks the bubble's tap target.
32 lines
1022 B
TypeScript
32 lines
1022 B
TypeScript
import { useI18n } from "../../../i18n";
|
|
import type { Post } from "../../../types/post";
|
|
import { autolink } from "../utils/autolink";
|
|
import { postDisplayText } from "../utils/postText";
|
|
import { CollapsibleText } from "../CollapsibleText";
|
|
import { SingleImageFrame } from "./SingleImageFrame";
|
|
|
|
export function ImageWithTextBubble({ post }: { post: Post }) {
|
|
const { lang } = useI18n();
|
|
const att = post.attachments[0];
|
|
const text = postDisplayText(post, lang);
|
|
if (!att) return null;
|
|
return (
|
|
<div className="flex flex-col">
|
|
<SingleImageFrame
|
|
postId={post.id}
|
|
attachment={att}
|
|
text={text}
|
|
showFilename={post.categorySlug === "official-assets"}
|
|
/>
|
|
{text ? (
|
|
<CollapsibleText
|
|
wrapperClassName="px-4 pt-3"
|
|
className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-6 text-neutral-100"
|
|
>
|
|
{autolink(text)}
|
|
</CollapsibleText>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|