feat(home): align desktop cards with Figma actions
- Update desktop header actions to match Figma: remove the standalone desktop favorites button and style the wallet connect pill with the wallet icon while allowing localized labels to expand. - Replace favorite action with the Figma bookmark SVG and hover state; replace download cloud with the provided Figma SVG. - Align official recommendation cards with the Figma card structure, colors, and bottom action row. - Rework popular rows to the Figma desktop rhythm with 90px rows, wide thumbnails, rank area, and right-side action buttons. - Add a dedicated desktop LatestUpdateCard for Figma-style latest-update masonry cards with flexible text-driven heights instead of fixed card heights.
This commit is contained in:
TerryM
258
src/components/LatestUpdateCard.tsx
Normal file
258
src/components/LatestUpdateCard.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import { LoaderCircle, Play } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { FavoriteButton } from "../favorites/FavoriteButton";
|
||||
import { useI18n } from "../i18n";
|
||||
import { useLocalizedPath } from "../useLocalizedPath";
|
||||
import type { Attachment, Post } from "../types/post";
|
||||
import { DownloadCloudIcon } from "./icons/DownloadCloudIcon";
|
||||
import {
|
||||
mediaSaveKindFromAttachment,
|
||||
useSaveToAlbumGuide,
|
||||
} from "./SaveToAlbumGuide";
|
||||
import { useToast } from "./Toast";
|
||||
import { downloadAttachment } from "./messageStream/utils/downloadFile";
|
||||
import { fileIcon } from "./messageStream/utils/fileIcon";
|
||||
import {
|
||||
filenameWithExtension,
|
||||
splitFilename,
|
||||
} from "./messageStream/utils/filenameDisplay";
|
||||
import { formatBytes } from "./messageStream/utils/formatBytes";
|
||||
import { formatDateTime } from "./messageStream/utils/formatTime";
|
||||
import { postDisplayText } from "./messageStream/utils/postText";
|
||||
import { autolink } from "./messageStream/utils/autolink";
|
||||
|
||||
function LatestActions({
|
||||
post,
|
||||
attachment,
|
||||
}: {
|
||||
post: Post;
|
||||
attachment?: Attachment;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const { showToast } = useToast();
|
||||
const { showSaveToAlbumGuide } = useSaveToAlbumGuide();
|
||||
const [isDownloading, setIsDownloading] = useState(false);
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!attachment || isDownloading) return;
|
||||
setIsDownloading(true);
|
||||
try {
|
||||
await downloadAttachment(post.id, attachment.id, attachment.filename);
|
||||
const mediaKind = mediaSaveKindFromAttachment(attachment);
|
||||
if (mediaKind) showSaveToAlbumGuide(mediaKind);
|
||||
} catch {
|
||||
showToast(t("downloadFail"), "error");
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative z-20 flex shrink-0 items-center gap-2">
|
||||
<FavoriteButton resourceId={post.id} size="sm" />
|
||||
{attachment ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
void handleDownload();
|
||||
}}
|
||||
disabled={isDownloading}
|
||||
aria-label={
|
||||
isDownloading ? t("downloading") : `Download ${attachment.filename}`
|
||||
}
|
||||
aria-busy={isDownloading}
|
||||
className="relative z-20 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] transition hover:bg-[#22232D] disabled:cursor-wait"
|
||||
>
|
||||
{isDownloading ? (
|
||||
<LoaderCircle
|
||||
className="h-5 w-5 animate-spin text-[#A8A9AE]"
|
||||
strokeWidth={2.3}
|
||||
/>
|
||||
) : (
|
||||
<DownloadCloudIcon />
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Footer({ post, attachment }: { post: Post; attachment?: Attachment }) {
|
||||
return (
|
||||
<div className="flex min-h-16 items-center justify-between gap-3 px-4 py-3">
|
||||
<time
|
||||
dateTime={post.publishedAt}
|
||||
className="shrink-0 text-[12px] font-medium leading-[19.2px] text-[#A8A9AE]"
|
||||
>
|
||||
{formatDateTime(post.publishedAt)}
|
||||
</time>
|
||||
<LatestActions post={post} attachment={attachment} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function attachmentPreview(att: Attachment | undefined): string {
|
||||
if (!att) return "";
|
||||
return att.thumbnailUrl ?? att.posterUrl ?? att.thumbUrl ?? att.url ?? "";
|
||||
}
|
||||
|
||||
function FileCard({ post, att }: { post: Post; att: Attachment }) {
|
||||
const { lang } = useI18n();
|
||||
const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
|
||||
const displayFilename = filenameWithExtension(att.filename, att.mime);
|
||||
const text = postDisplayText(post, lang);
|
||||
|
||||
return (
|
||||
<article className="relative flex flex-col overflow-hidden rounded-2xl bg-[#272632] text-left">
|
||||
<CardLink postId={post.id} />
|
||||
<div className="flex min-h-[52px] min-w-0 items-center gap-4 px-4 pt-3">
|
||||
<div
|
||||
className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
aria-hidden
|
||||
>
|
||||
<Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div
|
||||
className="flex min-w-0 items-baseline text-[15px] font-medium leading-6 text-ark-gold"
|
||||
title={displayFilename}
|
||||
>
|
||||
{(() => {
|
||||
const { base, ext } = splitFilename(displayFilename);
|
||||
const tailChars = Math.min(8, base.length);
|
||||
const head = base.slice(0, base.length - tailChars);
|
||||
const tail = base.slice(base.length - tailChars) + ext;
|
||||
return (
|
||||
<>
|
||||
<span className="min-w-0 truncate">{head}</span>
|
||||
<span className="shrink-0 whitespace-pre">{tail}</span>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="text-[12px] font-medium leading-[19.2px] text-[#A8A9AE]">
|
||||
{formatBytes(att.sizeBytes)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap break-words px-4 pt-3 text-[15px] font-medium leading-6 text-white">
|
||||
{text || post.title || displayFilename}
|
||||
</div>
|
||||
<Footer post={post} attachment={att} />
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaGrid({ attachments }: { attachments: Attachment[] }) {
|
||||
const visible = attachments.slice(0, 4);
|
||||
const extra = Math.max(0, attachments.length - visible.length);
|
||||
if (visible.length <= 1) {
|
||||
const src = attachmentPreview(visible[0]);
|
||||
return src ? (
|
||||
<img
|
||||
src={src}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full bg-black" />
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-0">
|
||||
{visible.map((att, index) => (
|
||||
<div key={att.id} className="relative overflow-hidden bg-black">
|
||||
<img
|
||||
src={attachmentPreview(att)}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{extra > 0 && index === visible.length - 1 ? (
|
||||
<div className="absolute inset-0 grid place-items-center bg-black/55 text-[24px] font-bold text-white backdrop-blur-sm">
|
||||
+{extra}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MediaBadge({ att }: { att?: Attachment }) {
|
||||
if (!att) return null;
|
||||
return (
|
||||
<div className="absolute left-3 top-3 z-20 inline-flex h-8 items-center overflow-hidden rounded-full bg-black/75 text-[12px] font-medium text-white shadow-lg backdrop-blur">
|
||||
<span className="grid h-8 w-8 place-items-center rounded-full bg-[#3a3a40]">
|
||||
<DownloadCloudIcon />
|
||||
</span>
|
||||
<span className="px-3">{formatBytes(att.sizeBytes)}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VisualCard({ post }: { post: Post }) {
|
||||
const { lang } = useI18n();
|
||||
const att = post.attachments[0];
|
||||
const isVideo = att?.kind === "video" || att?.mime.startsWith("video/");
|
||||
const text = postDisplayText(post, lang);
|
||||
|
||||
return (
|
||||
<article className="relative flex flex-col overflow-hidden rounded-2xl bg-[#272632] text-left">
|
||||
<CardLink postId={post.id} />
|
||||
<div
|
||||
className={`relative overflow-hidden bg-black ${
|
||||
isVideo ? "aspect-[416/180]" : "aspect-[416/230]"
|
||||
}`}
|
||||
>
|
||||
<MediaGrid attachments={post.attachments} />
|
||||
<MediaBadge att={att} />
|
||||
{isVideo ? (
|
||||
<div className="absolute inset-0 grid place-items-center">
|
||||
<span className="grid h-14 w-14 place-items-center rounded-full bg-black/55 text-white backdrop-blur-sm">
|
||||
<Play className="ml-1 h-7 w-7 fill-current" />
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{text || post.title ? (
|
||||
<div className="message-stream-copyable-text whitespace-pre-wrap break-words px-4 pt-3 text-[15px] font-medium leading-6 text-white">
|
||||
{autolink(text || post.title || "")}
|
||||
</div>
|
||||
) : null}
|
||||
<Footer post={post} attachment={att} />
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLink({ postId }: { postId: string }) {
|
||||
const lp = useLocalizedPath();
|
||||
return (
|
||||
<Link
|
||||
to={lp(`/browse?post=${encodeURIComponent(postId)}`)}
|
||||
aria-label="Open post"
|
||||
className="absolute inset-0 z-10 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function LatestUpdateCard({ post }: { post: Post }) {
|
||||
const first = post.attachments[0];
|
||||
const isFile =
|
||||
!!first &&
|
||||
!(
|
||||
first.kind === "image" ||
|
||||
first.kind === "video" ||
|
||||
first.mime.startsWith("image/") ||
|
||||
first.mime.startsWith("video/")
|
||||
);
|
||||
if (isFile) return <FileCard post={post} att={first} />;
|
||||
return <VisualCard post={post} />;
|
||||
}
|
||||
Reference in New Issue
Block a user