Files

TerryM 2ef26390be feat(stream): bubble footer with timestamp and inline favorite/download

Match the Figma 4206-6509 card layout for /browse: every bubble now
renders a bottom row with the publish timestamp on the left and the
action buttons on the right. Image, album, video, text and link cards
show only the FavoriteButton; file-document cards show the
FavoriteButton plus a new BubbleAttachmentDownloadButton sized to
match. Removes the absolute-positioned favorite from the default
variant, drops the right-aligned timestamp block, and strips the inline
per-row download button from FileDocBubble's default variant since the
download now lives in the footer. The 'latest' masonry variant is
untouched so the home page continues to use LatestFileCard's existing
internal footer.

2026-06-03 21:20:53 +08:00

2.7 KiB

Raw Blame History

title, type, date

title	type	date
MessageBubble footer — timestamp + favorite + (file) download	quick-work	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.

2.7 KiB Raw Blame History

MessageBubble footer — timestamp + favorite + (file) download

Task

Changes

Verification

Notes

2.7 KiB

Raw Blame History