Align compact message bubbles within media column

This commit is contained in:
TerryM
2026-05-27 13:16:40 +08:00
parent 565784b4bb
commit a6fda3cd03
2 changed files with 17 additions and 80 deletions

View File

@@ -32,12 +32,13 @@ export function MessageBubble({ post }: { post: Post }) {
); );
return ( return (
<article <div
id={`post-${post.id}`} id={`post-${post.id}`}
className="mx-auto w-full max-w-[380px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
>
<article
className={`relative rounded-2xl bg-ark-panel text-left shadow-sm ${ className={`relative rounded-2xl bg-ark-panel text-left shadow-sm ${
isVisual isVisual ? "w-full" : "w-fit max-w-full"
? "mx-auto w-full max-w-[380px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
: "self-start w-fit max-w-[92%] md:max-w-[680px] lg:max-w-[760px] xl:max-w-[820px]"
} ${isTextOnly ? "px-3 py-2" : "p-2"}`} } ${isTextOnly ? "px-3 py-2" : "p-2"}`}
> >
<Bubble post={post} /> <Bubble post={post} />
@@ -49,5 +50,6 @@ export function MessageBubble({ post }: { post: Post }) {
</time> </time>
<span className="block clear-both" /> <span className="block clear-both" />
</article> </article>
</div>
); );
} }

View File

@@ -1,27 +1,5 @@
import { assetUrl } from "../../../api"; import { assetUrl } from "../../../api";
type SaveFilePicker = (options?: {
suggestedName?: string;
types?: Array<{
description?: string;
accept: Record<string, string[]>;
}>;
}) => Promise<{
createWritable: () => Promise<{
write: (data: Blob) => Promise<void>;
close: () => Promise<void>;
}>;
}>;
type NavigatorWithFileShare = Navigator & {
canShare?: (data: { files?: File[] }) => boolean;
share?: (data: { files?: File[]; title?: string }) => Promise<void>;
};
type WindowWithSavePicker = Window & {
showSaveFilePicker?: SaveFilePicker;
};
export function attachmentDownloadUrl(postId: string, attachmentId: string) { export function attachmentDownloadUrl(postId: string, attachmentId: string) {
return assetUrl( return assetUrl(
`/api/posts/${encodeURIComponent(postId)}/attachments/${encodeURIComponent( `/api/posts/${encodeURIComponent(postId)}/attachments/${encodeURIComponent(
@@ -39,45 +17,7 @@ export async function downloadAttachment(
} }
export async function downloadFile(url: string, filename: string) { export async function downloadFile(url: string, filename: string) {
const res = await fetch(url, { credentials: "include" }); triggerDownload(url, filename || "download");
if (!res.ok) throw new Error(await res.text());
const blob = await res.blob();
const safeName = filename || "download";
if (window.isSecureContext) {
const picker = (window as WindowWithSavePicker).showSaveFilePicker;
if (picker) {
const handle = await picker({
suggestedName: safeName,
types: blob.type
? [
{
description: "File",
accept: { [blob.type]: [extensionFromName(safeName)] },
},
]
: undefined,
});
const writable = await handle.createWritable();
await writable.write(blob);
await writable.close();
return;
}
}
const file = new File([blob], safeName, {
type: blob.type || "application/octet-stream",
});
const nav = navigator as NavigatorWithFileShare;
if (nav.canShare?.({ files: [file] }) && nav.share) {
await nav.share({ files: [file], title: safeName });
return;
}
const objectUrl = URL.createObjectURL(blob);
triggerDownload(objectUrl, safeName);
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30_000);
} }
function triggerDownload(url: string, filename: string) { function triggerDownload(url: string, filename: string) {
@@ -89,8 +29,3 @@ function triggerDownload(url: string, filename: string) {
a.click(); a.click();
a.remove(); a.remove();
} }
function extensionFromName(filename: string) {
const match = /\.[^.]+$/.exec(filename);
return match?.[0] || ".bin";
}