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/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) => (