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

13
src/components/SectionHeader.tsx
View File

@@ -11,16 +11,19 @@ export function SectionHeader({
viewAllLabel: string;
}) {
return (
<div className="flex h-6 items-center justify-between gap-4">
<div className="flex min-w-0 items-center gap-4">
<span className="h-6 w-1 shrink-0 bg-ark-gold" aria-hidden />
<h2 className="truncate text-2xl font-bold leading-6 tracking-tight text-white md:text-2xl">
<div className="flex h-[49px] items-center justify-between gap-4 md:h-6">
<div className="flex min-w-0 items-center gap-3 md:gap-4">
<span
className="h-5 w-[3px] shrink-0 bg-ark-gold md:h-6 md:w-1"
aria-hidden
/>
<h2 className="truncate text-lg font-semibold leading-[24.5px] tracking-tight text-white md:text-2xl md:font-bold md:leading-6">
{title}
</h2>
</div>
<Link
to={viewAllTo}
className="inline-flex shrink-0 items-center gap-1 text-[15px] font-medium leading-none text-ark-gold hover:text-ark-gold2"
className="inline-flex shrink-0 items-center gap-1 text-[13px] font-normal leading-none text-ark-gold hover:text-ark-gold2 md:text-[15px] md:font-medium"
>
{viewAllLabel}
<ChevronRight className="h-4 w-4" strokeWidth={2.7} />

16
src/components/messageStream/FilterChips.tsx
View File

@@ -23,17 +23,17 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
const tabClass = (active: boolean) =>
[
"relative shrink-0 whitespace-nowrap px-1 py-3 text-[15px] leading-none outline-none transition-colors",
"border-b-2",
"relative flex h-[52px] shrink-0 items-center whitespace-nowrap px-3 pb-4 pt-3 text-[15px] leading-6 outline-none transition-colors md:h-auto md:px-1 md:py-3 md:leading-none",
"border-b-0 md:border-b-2",
active
? "border-ark-gold text-ark-gold font-medium"
: "border-transparent text-neutral-400 hover:text-ark-gold/80",
? "border-ark-gold font-medium text-white md:text-ark-gold"
: "border-transparent text-[#97989A] hover:text-ark-gold/80 md:text-neutral-400",
].join(" ");
return (
<div className="sticky top-0 z-10 border-b border-ark-line bg-ark-bg/95 backdrop-blur md:rounded-t-xl">
<div className="sticky top-0 z-10 bg-ark-bg/95 backdrop-blur md:rounded-t-xl md:border-b md:border-ark-line">
<div
className="flex items-end gap-5 overflow-x-auto overflow-y-hidden px-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
className="relative flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-8 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
role="tablist"
>
{TYPE_FILTERS.map((tp) => {
@@ -51,6 +51,10 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
</button>
);
})}
<div
className="pointer-events-none absolute right-0 top-0 hidden h-[52px] w-[114px] bg-gradient-to-l from-ark-bg via-ark-bg/85 to-transparent max-md:block"
aria-hidden
/>
</div>
</div>
);

4
src/components/messageStream/MessageStream.tsx
View File

@@ -72,10 +72,10 @@ export function MessageStream({ scope }: MessageStreamProps) {
};
return (
<div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
<div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
<FilterChips type={type} onTypeChange={(v) => updateParam("type", v)} />
<div className="flex flex-col gap-3 pt-2">
<div className="flex flex-col gap-3 px-4 pt-4 md:px-0 md:pt-2">
{groups.map((group) => (
<div key={group.dayKey} className="flex flex-col gap-3">
{group.items.map((post) => (

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}