---
title: "MessageBubble footer — timestamp + favorite + (file) download"
type: quick-work
date: 2026-06-03
---

# MessageBubble footer — timestamp + favorite + (file) download

## Task
Implement the 全部资料 card layout from Figma `4206-6509`:
- Each card shows a bottom row with the publish timestamp on the left and action buttons on the right.
- Image / album / video / text / link bubbles → 1 button (FavoriteButton).
- File-document bubbles (mp3, pptx, pdf, zip, …) → 2 buttons (FavoriteButton + Download).

## Changes
- `src/components/messageStream/BubbleAttachmentDownloadButton.tsx` (new) — small circular download button visually matched to `FavoriteButton` (sm). Handles its own download/loading state and surfaces the `SaveToAlbumGuide` toast for media kinds.
- `src/components/messageStream/MessageBubble.tsx`
  - Removed the absolute-positioned FavoriteButton for the default variant.
  - Removed the right-aligned `<time>` block for the default variant.
  - Added a new flex footer: timestamp on the left, FavoriteButton (+ optional `BubbleAttachmentDownloadButton`) on the right.
  - File-doc detection is based on `pickBubble(post) === FileDocBubble` and the primary attachment `post.attachments[0]`.
  - `variant === "latest"` paths are left untouched (latest masonry cards keep the bottom-right absolute FavoriteButton and the existing right-aligned timestamp because `LatestFileCard` already renders its own footer).
- `src/components/messageStream/bubbles/FileDocBubble.tsx`
  - Removed the inline per-row download button from `AttachmentRow` in the default variant (download now lives in the bubble footer).
  - Trimmed the now-unused state and handlers from `AttachmentRow`; imports remain because `LatestFileCard` still uses them.

## Verification
- `npx tsc --noEmit` — clean.
- `npm run format` then `npm run format:check` — clean.
- `npm test` — 49/49 passing.
- Visual check pending on device — expected to match Figma `4206-6509`:
  - timestamp + bookmark on image/album/video/text/link cards
  - timestamp + bookmark + download on file cards

## Notes
- For posts with multiple file attachments, the footer download button currently targets `attachments[0]` only (matches the Figma single-attachment cards). If a multi-attachment file post needs per-attachment download, revisit `AttachmentRow` and re-add a small inline download or expose a list in an overflow menu.
- The new download button mirrors `FavoriteButton`'s sm style (h-9 w-9, same border / bg / hover treatment) so the two sit on the same baseline and share visual weight.
- The home page's "latest" masonry variant is unaffected — that path renders `LatestFileCard` which already has its own footer.