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.

src/components/messageStream/MessageBubble.tsx

@@ -10,7 +10,12 @@ import { LinkPreviewCard } from "./LinkPreviewCard";
 import { formatDateTime } from "./utils/formatTime";
 import { FavoriteButton } from "../../favorites/FavoriteButton";
 
-type BubbleComponent = ComponentType<{ post: Post }>;
+export type MessageBubbleVariant = "default" | "latest";
+
+type BubbleComponent = ComponentType<{
+  post: Post;
+  variant?: MessageBubbleVariant;
+}>;
 
 export function pickBubble(post: Post): BubbleComponent {
   const a = post.attachments;
@@ -27,11 +32,14 @@ export function pickBubble(post: Post): BubbleComponent {
 export function MessageBubble({
   post,
   fluid = false,
+  variant = "default",
 }: {
   post: Post;
   /** When true, fill the parent container instead of applying the standalone
    *  feed max-widths. Used by the desktop 3-column masonry on the home page. */
   fluid?: boolean;
+  /** Desktop latest-updates cards follow the dedicated Figma masonry design. */
+  variant?: MessageBubbleVariant;
 }) {
   const Bubble = pickBubble(post);
   const isVisual =
@@ -39,6 +47,7 @@ export function MessageBubble({
     Bubble === VideoBubble ||
     Bubble === ImageBubble ||
     Bubble === ImageWithTextBubble;
+  const isLatestFileCard = variant === "latest" && Bubble === FileDocBubble;
 
   return (
     <div
@@ -51,28 +60,34 @@ export function MessageBubble({
     >
       <article
         className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${
-          isVisual ? "p-0" : "px-4 py-3"
+          isVisual || isLatestFileCard ? "p-0" : "px-4 py-3"
         }`}
       >
-        <FavoriteButton
-          resourceId={post.id}
-          size="sm"
-          className="absolute right-3 top-3 z-20 shadow-lg shadow-black/30"
-        />
-        <Bubble post={post} />
+        {!isLatestFileCard ? (
+          <FavoriteButton
+            resourceId={post.id}
+            size="sm"
+            className={`absolute z-20 shadow-lg shadow-black/30 ${
+              variant === "latest" ? "bottom-4 right-4" : "right-3 top-3"
+            }`}
+          />
+        ) : null}
+        <Bubble post={post} variant={variant} />
         {post.linkPreview ? (
           <div className={isVisual ? "px-4 pt-3" : "mt-3"}>
             <LinkPreviewCard preview={post.linkPreview} />
           </div>
         ) : null}
-        <time
-          dateTime={post.publishedAt}
-          className={`block text-right text-[12px] leading-[19px] text-[#A8A9AE] ${
-            isVisual ? "px-4 pb-3 pt-0.5" : "mt-3"
-          }`}
-        >
-          {formatDateTime(post.publishedAt)}
-        </time>
+        {!isLatestFileCard ? (
+          <time
+            dateTime={post.publishedAt}
+            className={`block text-right text-[12px] leading-[19px] text-[#A8A9AE] ${
+              isVisual ? "px-4 pb-3 pt-0.5" : "mt-3"
+            }`}
+          >
+            {formatDateTime(post.publishedAt)}
+          </time>
+        ) : null}
       </article>
     </div>
   );

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -7,6 +7,7 @@ import { downloadAttachment } from "../utils/downloadFile";
 import { fileIcon } from "../utils/fileIcon";
 import { filenameWithExtension, splitFilename } from "../utils/filenameDisplay";
 import { formatBytes } from "../utils/formatBytes";
+import { formatDateTime } from "../utils/formatTime";
 import { postDisplayText } from "../utils/postText";
 import { CollapsibleText } from "../CollapsibleText";
 import {
@@ -14,6 +15,8 @@ import {
   useSaveToAlbumGuide,
 } from "../../SaveToAlbumGuide";
 import { useToast } from "../../Toast";
+import { FavoriteButton } from "../../../favorites/FavoriteButton";
+import type { MessageBubbleVariant } from "../MessageBubble";
 
 function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
   const { t } = useI18n();
@@ -104,9 +107,123 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
   );
 }
 
-export function FileDocBubble({ post }: { post: Post }) {
+function LatestFileCard({ post }: { post: Post }) {
+  const { t, lang } = useI18n();
+  const { showToast } = useToast();
+  const { showSaveToAlbumGuide } = useSaveToAlbumGuide();
+  const [isDownloading, setIsDownloading] = useState(false);
+  const att = post.attachments[0];
+  const text = postDisplayText(post, lang);
+
+  if (!att) return null;
+
+  const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
+  const displayFilename = filenameWithExtension(att.filename, att.mime);
+
+  const handleDownload = async () => {
+    if (isDownloading) return;
+    setIsDownloading(true);
+    try {
+      await downloadAttachment(post.id, att.id, displayFilename);
+      const mediaKind = mediaSaveKindFromAttachment(att);
+      if (mediaKind) showSaveToAlbumGuide(mediaKind);
+    } catch {
+      showToast(t("downloadFail"), "error");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-[188px] flex-col gap-6 px-4 py-4">
+      <div className="flex h-[52px] min-w-0 items-center gap-4">
+        <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="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]">
+            {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
+          </div>
+        </div>
+      </div>
+
+      {text ? (
+        <div className="message-stream-copyable-text line-clamp-2 min-h-[48px] select-text whitespace-pre-wrap break-words text-[15px] font-medium leading-6 text-white">
+          {text}
+        </div>
+      ) : (
+        <div className="min-h-[48px]" />
+      )}
+
+      <div className="mt-auto flex h-10 items-end justify-between gap-3">
+        <time
+          dateTime={post.publishedAt}
+          className="text-[12px] font-medium leading-[19.2px] text-[#A8A9AE]"
+        >
+          {formatDateTime(post.publishedAt)}
+        </time>
+        <div className="flex shrink-0 items-center gap-2">
+          <FavoriteButton resourceId={post.id} size="sm" />
+          <button
+            type="button"
+            onClick={handleDownload}
+            disabled={isDownloading}
+            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] transition hover:bg-[#22232D] disabled:cursor-wait"
+            aria-label={
+              isDownloading ? t("downloading") : `Download ${att.filename}`
+            }
+            aria-busy={isDownloading}
+          >
+            {isDownloading ? (
+              <LoaderCircle
+                className="h-5 w-5 animate-spin text-[#A8A9AE]"
+                strokeWidth={2.3}
+              />
+            ) : (
+              <DownloadCloudIcon />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FileDocBubble({
+  post,
+  variant = "default",
+}: {
+  post: Post;
+  variant?: MessageBubbleVariant;
+}) {
   const { lang } = useI18n();
   const text = postDisplayText(post, lang);
+
+  if (variant === "latest") {
+    return <LatestFileCard post={post} />;
+  }
+
   return (
     <div className="flex flex-col gap-3">
       {post.attachments.map((att) => (