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

feat: align figma browse and category sections

Browse Source
This commit is contained in:
TerryM
2026-05-28 15:11:13 +08:00
parent 16f3f06431
commit e65c473369
7 changed files with 149 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,6 @@ import { postDisplayText } from "../utils/postText";
function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
const { t } = useI18n();
const isImageAsDoc = att.mime.startsWith("image/");
const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
const displayFilename = filenameWithExtension(att.filename, att.mime);
const [isDownloading, setIsDownloading] = useState(false);
@@ -28,50 +27,41 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
};
return (
<div className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5">
<div className="group flex h-[52px] items-center gap-3">
<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="truncate text-[15px] font-medium leading-6 text-ark-gold group-hover:text-ark-gold2"
title={displayFilename}
>
{middleEllipsisFilename(displayFilename)}
</div>
<div className="text-[12px] font-medium leading-[19.2px] text-[#A8A9AE]">
{isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
</div>
</div>
<button
type="button"
onClick={handleDownload}
disabled={isDownloading}
className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full disabled:cursor-wait md:h-12 md:w-12"
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white transition hover:bg-[#22232D] disabled:cursor-wait"
aria-label={
isDownloading ? t("downloading") : `Download ${att.filename}`
}
aria-busy={isDownloading}
>
{isImageAsDoc && att.thumbnailUrl ? (
<img
src={att.thumbnailUrl}
alt=""
className="absolute inset-0 h-full w-full object-cover"
/>
{isDownloading ? (
<LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.3} />
) : (
<div
className="flex h-full w-full items-center justify-center"
style={{ backgroundColor: color }}
>
<Icon className="h-5 w-5 text-white" strokeWidth={2.2} />
</div>
<DownloadCloudIcon className="h-6 w-6" />
)}
<div className="absolute inset-0 flex items-center justify-center bg-black/35 text-white opacity-100 transition group-hover:bg-black/45 group-focus-visible:bg-black/45">
{isDownloading ? (
<LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
) : (
<DownloadCloudIcon className="h-4 w-4" />
)}
</div>
</button>
<div className="min-w-0 flex-1">
<div
className="truncate text-[14px] font-medium text-ark-gold2 group-hover:text-ark-gold"
title={displayFilename}
>
{middleEllipsisFilename(displayFilename)}
</div>
<div className="text-[11px] text-neutral-400">
{isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
</div>
</div>
</div>
);
}
@@ -80,12 +70,12 @@ export function FileDocBubble({ post }: { post: Post }) {
const { lang } = useI18n();
const text = postDisplayText(post, lang);
return (
<div className="flex flex-col gap-1">
<div className="flex flex-col gap-3">
{post.attachments.map((att) => (
<AttachmentRow key={att.id} postId={post.id} att={att} />
))}
{text ? (
<div className="message-stream-copyable-text mt-1 select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
<div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[15px] font-medium leading-6 text-neutral-100">
{text}
</div>
) : null}